浏览代码

CSS fixes.

- Pending contacts were not aligned to action icons next to them.
- Invite contacts search box went out of bounds on FF
JC Brand 9 年之前
父节点
当前提交
bf524424c2
共有 3 个文件被更改,包括 17 次插入14 次删除
  1. 8 7
      css/converse.css
  2. 3 3
      sass/_chatrooms.scss
  3. 6 4
      sass/_roster.scss

+ 8 - 7
css/converse.css

@@ -1811,7 +1811,11 @@
           width: 80%; }
       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact.request-actions {
         margin-left: 0.5em;
+        margin-bottom: 0.3em;
         float: right; }
+      #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
+        width: 69%;
+        padding: 0; }
       #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
         font-size: 16px;
         float: left;
@@ -1826,7 +1830,8 @@
         white-space: nowrap;
         text-overflow: ellipsis; }
       #conversejs #converse-roster .roster-contacts dd span {
-        padding: 0 0.5em 0 0; }
+        padding: 0 0.5em 0 0;
+        height: 100%; }
       #conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
         margin-left: 5px; }
       #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
@@ -1837,9 +1842,6 @@
         color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
     width: 80%; }
-  #conversejs #converse-roster span.req-contact-name {
-    width: 69%;
-    padding: 0; }
 
 #conversejs .chat-head-chatroom {
   background-color: #E76F51; }
@@ -1881,8 +1883,7 @@
         height: 100%;
         min-width: 200px; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-          margin-top: 0.5em;
-          padding: 0.5em 0.5em 0 0.5em; }
+          padding: 0 0.5em 0 0.5em; }
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
       #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
@@ -1935,7 +1936,7 @@
     margin: 0.3em; }
     #conversejs .chatroom .room-invite .invited-contact {
       margin: -1px 0 0 -1px;
-      width: 100px;
+      width: 100%;
       border: 1px solid #999; }
       #conversejs .chatroom .room-invite .invited-contact.tt-input {
         width: 100%;

+ 3 - 3
sass/_chatrooms.scss

@@ -43,8 +43,8 @@
                     height: 100%;
                     min-width: $chat-width;
                     .chat-content {
-                        margin-top: 0.5em;
-                        padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding.
+                        // There's an annoying Chrome box-sizing bug which prevents us from adding 0.5em padding here.
+                        padding: 0 0.5em 0 0.5em;
                     }
                 }
                 .mentioned {
@@ -112,7 +112,7 @@
             margin: 0.3em;
             .invited-contact {
                 margin: -1px 0 0 -1px;
-                width: 100px;
+                width: 100%;
                 border: 1px solid #999;
                 &.tt-input {
                     width: 100%;

+ 6 - 4
sass/_roster.scss

@@ -97,8 +97,13 @@
             &.requesting-xmpp-contact {
                 &.request-actions {
                     margin-left: 0.5em;
+                    margin-bottom: 0.3em;
                     float: right;
                 }
+                .req-contact-name {
+                    width: 69%;
+                    padding: 0;
+                }
             }
             &.current-xmpp-contact span {
                 font-size: 16px;
@@ -118,6 +123,7 @@
             }
             span {
                 padding: 0 0.5em 0 0;
+                height: 100%;
             }
             a {
                 &.decline-xmpp-request {
@@ -137,9 +143,5 @@
         &.pending-contact-name {
             width: 80%;
         }
-        &.req-contact-name {
-            width: 69%;
-            padding: 0;
-        }
     }
 }