Merge hj's css overhaul and fix conflicts

1 files changed, 34 insertions, 28 deletions

diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index ec379db5..50bd0017 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chat-panel">
-    <div class="panel panel-default base01-background">
-      <div class="panel-heading timeline-heading base02-background base04">
+    <div class="panel panel-default">
+      <div class="panel-heading timeline-heading">
         <div class="title">
           {{$t('chat.title')}}
         </div>
@@ -29,30 +29,36 @@
 <script src="./chat_panel.js"></script>
 
 <style lang="scss">
- .chat-window {
-   max-height: 200px;
-   overflow-y: auto;
-   overflow-x: hidden;
- }
- .chat-message {
-   padding: 0.2em 0.5em
- }
- .chat-avatar {
-     img {
-         height: 32px;
-         width: 32px;
-         border-radius: 5px;
-         margin-right: 0.5em;
-     }
- }
- .chat-input {
-     display: flex;
-     form {
-         flex: auto;
-         input {
-             margin: 0.5em;
-             width: fill-available;
-         }
-     }
- }
+@import '../../_variables.scss';
+
+.chat-window {
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.chat-message {
+  padding: 0.2em 0.5em
+}
+
+.chat-avatar {
+  img {
+    height: 32px;
+    width: 32px;
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    margin-right: 0.5em;
+  }
+}
+
+.chat-input {
+  display: flex;
+  form {
+    flex: auto;
+    input {
+      margin: 0.5em;
+      width: fill-available;
+    }
+  }
+}
 </style>