Bug 742235 - Instant Messaging UI does not fit in small screens. ui-r+r=andreasn.
authorRichard Marti <richard.marti@gmail.com>
Mon, 23 Apr 2012 14:47:48 -0400
changeset 11708 d72f64d657a9444659bd22600fe832924df7d924
parent 11707 968ca62d78549c72c202c371ef0ea59efd0d1b69
child 11709 363f8c71f58acaebbc7d9bd97ae28df25e5e42f9
push idunknown
push userunknown
push dateunknown
bugs742235
Bug 742235 - Instant Messaging UI does not fit in small screens. ui-r+r=andreasn.
mail/components/im/messages/main.css
--- a/mail/components/im/messages/main.css
+++ b/mail/components/im/messages/main.css
@@ -44,23 +44,18 @@ body {
 
 p {
   font-family: sans-serif;
   margin: 0;
   padding: 0;
 }
 
 div.bubble {
-  margin: 20px 20px 3px 20px;
-  padding: 10px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 5px;
-  background-color: #fcfcfc;
-  border-color: #aeafac;
+  margin: 2px 20px;
+  padding: 0;
 }
 
 div.bubble:not(.context):not(.event) {
   -moz-animation-duration: 0.5s;
   -moz-animation-name: fadein;
   -moz-animation-iteration-count: 1;
 }
 
@@ -68,97 +63,89 @@ div.bubble:not(.context):not(.event) {
   from {
     opacity: 0;
   }
 
   to {
     opacity: 1.0;
   }
 }
+
 div.bubble>div.indicator {
-  margin: 0;
-}
-
-div.bubble.event {
-  background-color: hsl(0, 0%, 99%);
-  border-color: hsl(0, 0%, 85%);
+  padding: 10px;
+  -moz-margin-start: 60px;
 }
 
 div.bubble p.pseudo {
   font-size: smaller;
   font-weight: bold;
 }
 
 div.bubble p.pseudo>span>span.time {
   display: block;
   float: right;
-  margin-right: 10px;
   color: #aeafac;
   font-weight: normal;
 }
 
 div.bubble hr {
-  margin: 0;
+  margin: 2px 0 0;
   height: 2px;
   border-style: none;
   border-top: 1px solid #ffffff;
   border-bottom: 1px solid #dbddd7;
 }
 
-p.interval {
+p.interval, #lastMessage {
   text-align: center;
   color: hsl(0, 0%, 60%);
 }
 
 .message {
-  padding: 5px 10px;
+  padding: 5px 0 0;
 }
 
 #lastMessage {
   line-height: 20px;
-  text-align: center;
-  color: hsl(0, 0%, 60%);
-  font-weight: bold;
-  text-shadow: 0px 1px 0px #ffffff;
 }
 
 p.nick {
   font-weight: bold;
 }
 
 p.action {
   font-style: italic;
 }
 
 p.action:before {
   content: "*** ";
 }
 
 p.event {
   color: hsl(0, 0%, 60%);
+  margin: 3px 15px;
 }
 
 #Chat {
   white-space: normal;
+  padding-top: 18px;
 }
 
 p *:-moz-any-link img {
   margin-bottom: 1px;
   border-bottom: solid 1px;
 }
 
-
-
 /* used by javascript */
 p.button {
   cursor: pointer;
   min-height: 20px;
-  margin-left: -24px;
+  -moz-margin-start: -10px;
   margin-bottom: -3px;
-  padding-left: 24px;
+  -moz-padding-start: 24px;
 }
 
 p.hide {
   background: url('Bitmaps/plus.png') no-repeat left top;
 }
 
 p.hide:hover {
   background: url('Bitmaps/plus-hover.png') no-repeat left top;
@@ -178,19 +165,47 @@ p.show {
 p.show:hover {
   background: url('Bitmaps/minus-hover.png') no-repeat left top;
 }
 
 .usericon {
   position: absolute;
   max-width: 48px;
   max-height: 48px;
+  margin-top: -10px;
+  -moz-margin-start: -70px;
   border-radius: 5px;
 }
 
-.message,
-.sender {
-  padding-left: 60px;
+.bubble.event,
+.indicator {
+  border: 1px solid hsl(0, 0%, 85%);
+  border-radius: 5px;
+  background-color: hsl(0, 0%, 99%);
+}
+
+.nick .indicator {
+  border-color: Highlight;
 }
 
-.message {
-  min-height: 30px;
+@media (max-height: 500px) {
+  div.bubble {
+    margin-top: 3px !important;
+  }
+
+  div.bubble > div.indicator {
+    padding: 5px 10px;
+    -moz-margin-start: 0;
+  }
+
+  .usericon {
+    display: none;
+  }
+
+  .message {
+    padding: 2px 0 0;
+  }
+
+  .interval, #lastMessage {
+    line-height: -moz-initial !important;
+    margin: -2px 0 -3px !important;
+  }
 }