ConverseJS 9.0.0: first attempt to integrate.

2021-12-06 14:47:34 +01:00
parent 9ac40efb54
commit 79876e1750
7 changed files with 13 additions and 9 deletions
--- a/conversejs/custom/shared/styles/_peertubetheme.scss
+++ b/conversejs/custom/shared/styles/_peertubetheme.scss
@ -0,0 +1,156 @@
+#conversejs.theme-peertube {
+  .chatbox {
+    converse-chat-toolbar {
+      color: var(--peertube-main-foreground);
+      background-color: var(--peertube-main-background);
+    }
+
+    // Fixing emoji colors for some emoji like «motorcycle»
+    converse-emoji-picker {
+      .emoji-picker {
+        .insert-emoji {
+          a {
+            color: currentColor;
+          }
+        }
+      }
+
+      .emoji-picker__header {
+        color: var(--peertube-main-background);
+        background-color: var(--peertube-main-foreground);
+
+        ul {
+          .emoji-category {
+            color: var(--peertube-main-background);
+            background-color: var(--peertube-main-foreground);
+
+            a {
+              color: currentColor;
+            }
+
+            &.picked {
+              color: var(--peertube-main-foreground);
+              background-color: var(--peertube-main-background);
+
+              a {
+                color: currentColor;
+              }
+            }
+
+            &.selected a,
+            &:hover a {
+              color: var(--peertube-grey-foreground);
+              background-color: var(--peertube-grey-background);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .modal-content {
+    background-color: var(--peertube-main-background);
+
+    .close {
+      color: var(--peertube-main-foreground);
+    }
+  }
+
+  .button-cancel,
+  .btn-secondary,
+  .badge-secondary {
+    color: var(--peertube-grey-foreground);
+    background-color: var(--peertube-grey-background);
+  }
+
+  form {
+    &.converse-form {
+      background-color: var(--peertube-main-background);
+    }
+  }
+
+  .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+    background-color: var(--peertube-main-background);
+  }
+
+  .list-group-item {
+    color: var(--peertube-main-foreground);
+    background-color: var(--peertube-main-background);
+  }
+
+  .chat-msg__text {
+    // spoiler content more visible.
+    &.spoiler {
+      color: var(--peertube-grey-foreground) !important;
+      background-color: var(--peertube-grey-background) !important;
+    }
+
+    // underline links in chat messages
+    a[href] {
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .correcting {
+    // Fix color/background-color for correcting messages and textareas
+    color: var(--peertube-grey-foreground) !important;
+    background-color: var(--peertube-grey-background) !important;
+  }
+
+  .message.chat-msg .chat-msg__actions {
+    // Fixing message actions colors
+    .dropdown-menu {
+      --text-color-lighten-15-percent: #8c8c8c; // default ConverseJS theme color
+
+      background-color: #fff; // this is the default bootstrap color, used by ConverseJS
+
+      i,
+      button {
+        color: #212529; // default bootstrap color for dropdown-items
+      }
+    }
+  }
+
+  // hidding avatars when screen width is not big enough.
+  @media screen and (max-width: 576px) {
+    .message {
+      &.chat-msg {
+        .chat-msg__content {
+          margin-left: 0.5em;
+          width: 100%;
+        }
+
+        &.chat-msg--followup {
+          &.chat-msg--with-avatar .chat-msg__content {
+            margin-left: 0.5em;
+          }
+        }
+
+        .chat-msg__avatar {
+          display: none;
+        }
+
+        .chat-msg__body {
+          margin-left: 1em;
+        }
+      }
+    }
+  }
+
+  // Bigger occupants sidebar when width is not big enough.
+  @media screen and (max-width: 576px) {
+    .chatroom {
+      .box-flyout {
+        .chatroom-body {
+          .occupants {
+            min-width: 50%;
+          }
+        }
+      }
+    }
+  }
+}