make text font sizes consistent

add a gap between bubble-blocks from different users
make sent-text lighter than received-text
wrap the memberslist text more sensibly
fix height of bubbles to match that of avatars (32px)

1 files changed, 22 insertions, 10 deletions

diff --git a/webclient/app.css b/webclient/app.css
index 4e4cfffc48..750483b273 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -108,7 +108,7 @@ h1 {
     margin: 2px;
     bottom: 0px;
     font-size: 8pt;
-    word-wrap: break-word;
+    word-break: break-all;
 }
 
 .userPresence {
@@ -148,7 +148,7 @@ h1 {
 }
 
 .leftBlock {
-    width: 1px;
+    width: 10em;
     vertical-align: top;
     background-color: #fff;
     color: #888;
@@ -189,10 +189,11 @@ h1 {
 .text {
     background-color: #eee;
     border: 1px solid #d8d8d8;
-    height: 32px;
+    height: 31px;
     display: inline-table;
     max-width: 90%;
-    word-wrap: break-word;
+    font-size: 16px;
+    /* word-wrap: break-word; */
     word-break: break-all;
 }
 
@@ -201,6 +202,11 @@ h1 {
     border: 0px ! important;
 }
 
+.membership {
+    background-color: #fff ! important;
+    border: 0px ! important;
+}
+
 .image {
     display: block;
     max-width:320px;
@@ -210,22 +216,28 @@ h1 {
 }
 
 .bubble {
-    padding: 6px;
+    padding-top: 7px;
+    padding-bottom: 5px;
     padding-left: 1em;
     padding-right: 1em;
+    vertical-align: middle;
+}
+
+.differentUser td {
+    padding-top: 5px ! important;
+    margin-top: 5px ! important;
 }
 
 .mine {
     text-align: right;
 }
 
-.mine .text .bubble {
-    text-align: left ! important;
-    background-color: #d8d8e8 ! important;
+.mine .text {
+    background-color: #f8f8ff ! important;    
 }
 
-.mine .emote .bubble {
-    background-color: #fff ! important;
+.mine .text .bubble {
+    text-align: left ! important;
 }
 
 /*** Profile ***/