Fixes #1059 Remove bottom borders, uppercase titles and tweak padding

CHANGES.md

@@ -32,6 +32,7 @@
 
 - Spoiler messages didn't include the message author's name.
 - Documentation includes utf-8 charset to make minfied versions compatible across platforms. #1017
+- #1026 Typing in MUC shows "Typing from another device"
 
 ## 3.3.4 (2018-03-05)
 

css/converse.css

@@ -7868,8 +7868,7 @@ body.reset {
     font-weight: normal;
     margin: 1em 0; }
   #conversejs #controlbox .controlbox-pane .userinfo {
-    padding-bottom: 1em;
-    border-bottom: 1px solid #818479; }
+    padding-bottom: 1em; }
     #conversejs #controlbox .controlbox-pane .userinfo .username {
       margin-left: 0.5em;
       overflow: hidden;
@@ -7878,7 +7877,7 @@ body.reset {
       margin-bottom: 0.75em; }
   #conversejs #controlbox #chatrooms {
     padding: 0;
-    border-bottom: 1px solid #818479; }
+    padding-bottom: 1em; }
     #conversejs #controlbox #chatrooms form.add-chatroom {
       margin: 0;
       padding: 0; }
@@ -7889,7 +7888,7 @@ body.reset {
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
       display: block;
       color: #777;
-      margin: 0.5em 0 0.5em 0; }
+      padding: 0 0 0.5rem 0; }
       #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
         color: #585B51; }
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
@@ -7902,7 +7901,7 @@ body.reset {
         color: #777;
         display: block;
         overflow: hidden;
-        padding: 0.2em 0;
+        margin-top: 0.5em;
         text-shadow: 0 1px 0 #FAFAFA;
         word-wrap: break-word; }
         #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
@@ -7947,8 +7946,10 @@ body.reset {
             #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
               color: #206485; }
   #conversejs #controlbox #chatrooms, #conversejs #controlbox #converse-roster {
-    margin-top: 0.75em;
-    padding-bottom: 0.75em; }
+    margin: 1em 0 0 0; }
+    #conversejs #controlbox #chatrooms div.d-flex span, #conversejs #controlbox #converse-roster div.d-flex span {
+      margin: 0 0 0.5em 0;
+      text-transform: uppercase; }
   #conversejs #controlbox .dropdown a {
     width: 143px;
     display: inline-block; }
@@ -8139,7 +8140,7 @@ body.reset {
         color: #777;
         display: block;
         width: 100%;
-        padding: 0 0 0.5em 0; }
+        padding: 0 0 0.3rem 0; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
       #conversejs #converse-roster .roster-contacts .roster-group li {
@@ -8185,7 +8186,7 @@ body.reset {
             margin: 0;
             max-width: 80%;
             float: none;
-            height: 60px; }
+            height: 100%; }
             #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name.unread-msgs {
               max-width: 60%; }
           #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {

css/inverse.css

@@ -7943,8 +7943,7 @@ body {
     font-weight: normal;
     margin: 1em 0; }
   #conversejs #controlbox .controlbox-pane .userinfo {
-    padding-bottom: 1em;
-    border-bottom: 1px solid #818479; }
+    padding-bottom: 1em; }
     #conversejs #controlbox .controlbox-pane .userinfo .username {
       margin-left: 0.5em;
       overflow: hidden;
@@ -7953,7 +7952,7 @@ body {
       margin-bottom: 0.75em; }
   #conversejs #controlbox #chatrooms {
     padding: 0;
-    border-bottom: 1px solid #818479; }
+    padding-bottom: 1em; }
     #conversejs #controlbox #chatrooms form.add-chatroom {
       margin: 0;
       padding: 0; }
@@ -7964,7 +7963,7 @@ body {
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
       display: block;
       color: #777;
-      margin: 0.5em 0 0.5em 0; }
+      padding: 0 0 0.5rem 0; }
       #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
         color: #585B51; }
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
@@ -7977,7 +7976,7 @@ body {
         color: #777;
         display: block;
         overflow: hidden;
-        padding: 0.2em 0;
+        margin-top: 0.5em;
         text-shadow: 0 1px 0 #FAFAFA;
         word-wrap: break-word; }
         #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
@@ -8022,8 +8021,10 @@ body {
             #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
               color: #206485; }
   #conversejs #controlbox #chatrooms, #conversejs #controlbox #converse-roster {
-    margin-top: 0.75em;
-    padding-bottom: 0.75em; }
+    margin: 1em 0 0 0; }
+    #conversejs #controlbox #chatrooms div.d-flex span, #conversejs #controlbox #converse-roster div.d-flex span {
+      margin: 0 0 0.5em 0;
+      text-transform: uppercase; }
   #conversejs #controlbox .dropdown a {
     width: 143px;
     display: inline-block; }
@@ -8276,7 +8277,7 @@ body {
         color: #777;
         display: block;
         width: 100%;
-        padding: 0 0 0.5em 0; }
+        padding: 0 0 0.3rem 0; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
       #conversejs #converse-roster .roster-contacts .roster-group li {
@@ -8322,7 +8323,7 @@ body {
             margin: 0;
             max-width: 80%;
             float: none;
-            height: 30px; }
+            height: 100%; }
             #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name.unread-msgs {
               max-width: 60%; }
           #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {

sass/_controlbox.scss

@@ -214,7 +214,6 @@
         .controlbox-pane {
             .userinfo {
                 padding-bottom: 1em;
-                border-bottom: 1px solid $gray-color;
 
                 .username {
                     margin-left: 0.5em;
@@ -229,7 +228,7 @@
 
         #chatrooms {
             padding: 0;
-            border-bottom: 1px solid $gray-color;
+            padding-bottom: 1em;
 
             form.add-chatroom {
                 input[type=button],
@@ -245,7 +244,7 @@
                 .rooms-toggle {
                     display: block;
                     color: $text-color;
-                    margin: 0.5em 0 0.5em 0;
+                    padding: 0 0 0.5rem 0;
                     &:hover {
                         color: $dark-gray-color;
                     }
@@ -262,7 +261,7 @@
                         color: $text-color;
                         display: block;
                         overflow: hidden;
-                        padding: 0.2em 0;
+                        margin-top: 0.5em;
                         text-shadow: 0 1px 0 $text-shadow-color;
                         word-wrap: break-word;
                         a:hover {
@@ -312,8 +311,11 @@
         }
 
         #chatrooms, #converse-roster {
-            margin-top: 0.75em;
-            padding-bottom: 0.75em;
+            margin: 1em 0 0 0;
+            div.d-flex span {
+                margin: 0 0 0.5em 0;
+                text-transform: uppercase;
+            }
         }
 
         .dropdown {

sass/_roster.scss

@@ -68,7 +68,7 @@
                 color: $text-color;
                 display: block;
                 width: 100%;
-                padding: 0 0 0.5em 0;
+                padding: 0 0 0.3rem 0;
             }
 
             li {
@@ -128,7 +128,7 @@
                         margin: 0;
                         max-width: 80%;
                         float: none;
-                        height: $roster-item-height;
+                        height: 100%;
                         &.unread-msgs {
                             max-width: 60%;
                         }