瀏覽代碼

Remove flyout padding in fullscreen view mode

JC Brand 5 年之前
父節點
當前提交
5fd3ce0138
共有 3 個文件被更改,包括 4 次插入31 次删除
  1. 3 12
      sass/_chatbox.scss
  2. 0 18
      sass/_chatrooms.scss
  3. 1 1
      sass/_variables.scss

+ 3 - 12
sass/_chatbox.scss

@@ -3,7 +3,6 @@
         display: none;
     }
     .flyout {
-        border-radius: var(--chatbox-border-radius);
         position: absolute;
 
         @media screen and (max-height: $mobile-landscape-height) {
@@ -42,8 +41,7 @@
         color: #ffffff;
         font-size: 100%;
         margin: 0;
-        padding: 0;
-        padding-bottom: 0.5em;
+        padding: 1em;;
         position: relative;
 
         &.chat-head-chatbox {
@@ -498,13 +496,12 @@
 #conversejs.converse-fullscreen  {
     .flyout {
         border-radius: 0;
-        border-top: 0.8em solid var(--chat-head-color);
-        border: var(--flyout-padding) solid var(--chat-head-color);
+        border:none;
         bottom: 0;
     }
 
     .chat-head {
-        height: var(--fullpage-chat-head-height);
+        min-height: var(--fullpage-chat-head-height);
         .user-custom-message {
             font-size: 70%;
             height: auto;
@@ -609,12 +606,6 @@
         }
         .chat-body {
             background-color: var(--chat-head-color);
-            border-top-left-radius: var(--chatbox-border-radius);
-            border-top-right-radius: var(--chatbox-border-radius);
-        }
-        .chat-content {
-            border-top-left-radius: var(--chatbox-border-radius);
-            border-top-right-radius: var(--chatbox-border-radius);
         }
         .chat-title {
             font-size: var(--font-size-huge);

+ 0 - 18
sass/_chatrooms.scss

@@ -106,7 +106,6 @@
             .chatroom-body {
                 flex-direction: row;
                 flex-flow: nowrap;
-                border-bottom-radius: var(--chatbox-border-radius);
                 background-color: white;
                 border-top: 0;
                 width: 100%;
@@ -161,7 +160,6 @@
                     vertical-align: top;
                     background-color: var(--occupants-background-color);
                     border-left: var(--occupants-border-left);
-                    border-bottom-right-radius: var(--chatbox-border-radius);
                     padding: 0.5em;
                     max-width: 75%;
                     min-width: 20%;
@@ -288,8 +286,6 @@
                 }
                 .chatroom-form-container {
                     background-color: white;
-                    border-bottom-left-radius: var(--chatbox-border-radius);
-                    border-bottom-right-radius: var(--chatbox-border-radius);
                     border: 0;
                     color: var(--text-color);
                     font-size: var(--font-size);
@@ -345,8 +341,6 @@
                 height: 16em;
 
                 .chatroom-form-container {
-                    border-radius: 0 !important;
-
                     .chatroom-form {
                         padding-top: 2em;
                         padding-bottom: 0;
@@ -471,9 +465,6 @@
 
     .chatroom {
         .box-flyout {
-            background-color: var(--chatroom-head-bg-color);
-            border: var(--flyout-padding) solid var(--chatroom-head-bg-color);
-            border-top: 0.8em solid var(--chatroom-head-bg-color);
             width: 100%;
 
             .chat-head__desc {
@@ -481,15 +472,7 @@
             }
 
             .chatroom-body {
-                border-top-radius: var(--chatbox-border-radius);
-                .chatroom-form-container {
-                    border-radius: var(--chatbox-border-radius);
-                }
                 .chat-area {
-                    border-top-left-radius: var(--chatbox-border-radius);
-                    .chat-content {
-                        border-top-left-radius: var(--chatbox-border-radius);
-                    }
                     &.full {
                         .new-msgs-indicator {
                             max-width: 100%;
@@ -497,7 +480,6 @@
                     }
                 }
                 .occupants {
-                    border-top-right-radius: var(--chatbox-border-radius);
                     padding: var(--occupants-padding);
                     .occupants-heading {
                         font-size: var(--font-size-large);

+ 1 - 1
sass/_variables.scss

@@ -47,7 +47,7 @@ $mobile_portrait_length: 480px !default;
 
     --roster-height: 194px;
 
-    --flyout-padding: 1.2em;
+    --flyout-padding: 0.5em;
 
     --chat-head-color: var(--green);
     --chat-head-color-dark: #1E9652;