ConverseJS 9.0.0: first attempt to integrate.

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%;
+          }
+        }
+      }
+    }
+  }
+}

conversejs/custom/shared/styles/_variables.scss

@@ -0,0 +1,166 @@
+:root {
+  --peertube-main-foreground: #000;
+  --peertube-main-background: #fff;
+  --peertube-grey-foreground: #585858;
+  --peertube-grey-background: #e5e5e5;
+  --peertube-menu-foreground: #fff;
+  --peertube-menu-background: #000;
+  --peertube-input-foreground: #000;
+  --peertube-input-background: #fff;
+  --peertube-button-foreground: #fff;
+  --peertube-button-background: #f2690d;
+  --peertube-link: #000;
+  --peertube-link-hover: #000;
+}
+
+.conversejs.theme-peertube,
+.conversejs-bg.theme-peertube,
+#conversejs-bg.theme-peertube,
+body.converse-fullscreen.theme-peertube {
+  --subdued-color: #a8aba1;
+  --green: #3aa569; // only in this file
+  --redder-orange: #e77051; // only in this file
+  --orange: #e7a151; // only in this file
+  --light-blue: #578ea9; // only in this file
+  --lighter-blue: #85b47b; // only in this file
+  --chat-status-online: var(--green);
+  --chat-status-busy: var(--redder-orange);
+  --chat-status-away: var(--orange);
+  --brand-heading-color: #387592; // TODO: is brand-heading-color used?
+  --completion-light-color: var(--peertube-button-background);
+  --completion-normal-color: var(--peertube-button-background);
+  --completion-dark-color: var(--peertube-button-background);
+  --link-color: var(--peertube-link);
+  --link-hover-color: var(--peertube-link-hover);
+  --link-color-lighten-10-percent: var(--peertube-main-foreground);
+  --global-background-color: var(--peertube-main-background);
+  --inverse-link-color: var(--peertube-button-foreground);
+  --text-shadow-color: var(--peertube-main-background); // FIXME: should be a little different from background
+  --text-color: var(--peertube-main-foreground);
+  --controlbox-text-color: var(--peertube-main-foreground); // Note: controlbox is not used
+  --text-color-lighten-15-percent: var(--peertube-main-foreground);
+  --message-text-color: var(--peertube-main-foreground);
+  --message-receipt-color: var(--green);
+  --save-button-color: var(--green);
+  --button-text-color: white;
+  --message-avatar-width: 36px;
+  --message-avatar-height: 36px;
+  --chat-background-color: white;
+  --chat-textarea-color: var(--peertube-input-foreground);
+  --chat-textarea-background-color: var(--peertube-input-background);
+  --chat-textarea-height: 60px;
+  --send-button-height: 27px;
+  --send-button-margin: 3px;
+  --inline-action-margin: 0.75em;
+  --roster-height: 194px;
+  --chat-correcting-color: var(--peertube-grey-background);
+  --chat-head-color-dark: #1e9652; // should not be used in this plugin
+  --chat-head-color-darker: #0e763b; // should not be used in this plugin
+  --chat-head-color-lighten-50-percent: #e7f7ee;  // should not be used in this plugin
+  --chat-head-color: var(--green);
+  --chat-head-text-color: var(--peertube-main-foreground);
+  --chat-toolbar-btn-color: var(--peertube-button-background);
+  --chat-toolbar-btn-disabled-color: var(--peertube-grey-background);
+  --toolbar-btn-text-color: white;
+  --chat-content-background-color: var(--peertube-main-background);
+  --chat-info-color: var(--peertube-grey-foreground); // FIXME: dont know if it is used, and what it is.
+  --highlight-color: var(--peertube-grey-foreground); // FIXME: dont know if it is used, and what it is.
+  --highlight-color-darker: var(--peertube-grey-foreground); // FIXME: dont know if it is used, and what it is.
+  --primary-color: var(--peertube-button-background);
+  --primary-color-dark: var(--peertube-button-background);
+  --secondary-color: var(--peertube-button-background);
+  --secondary-color-dark: var(--peertube-button-background);
+  --warning-color: var(--orange);
+  --warning-color-dark: #d2842b;
+  --danger-color: #d24e2b;
+  --danger-color-dark: #a93415; // darker red
+  --light-background-color: var(--peertube-main-background);
+  --error-color: #d24e2b;
+  --info-color: #1e9652;
+  --button-border-radius: 5px;
+  --chatbox-border-radius: 0;
+  --groupchats-header-color: var(--peertube-button-background);
+  --groupchats-header-color-dark: var(--peertube-button-background);
+  --controlbox-width: 250px;
+  --controlbox-head-color: var(--light-blue);
+  --controlbox-heading-color: #777;
+  --controlbox-heading-font-weight: bold;
+  --controlbox-heading-top-margin: 0.75em;
+  --controlbox-pane-background-color: #333;
+  --controlbox-pane-bg-hover-color: #464646;
+  --panel-divider-color: #333;
+  --chat-gutter: 0.5em;
+  --minimized-chats-width: 130px;
+  --mobile-chat-width: 100%;
+  --mobile-chat-height: 400px;
+  --normal-font: "Source Sans Pro", sans-serif;
+  --heading-font: "Source Sans Pro", sans-serif;
+  --branding-font: "Source Sans Pro", sans-serif;
+  --heading-display: inline;
+  --heading-color: #9b4d;
+  --chatroom-color: var(--redder-orange);
+  --chatroom-badge-color: var(--peertube-button-background);
+  --chatroom-badge-hover-color: var(--peertube-button-background);
+  --chatroom-correcting-color: var(--peertube-grey-background);
+  --chatroom-head-bg-color-dark: #d24e2b;
+  --chatroom-head-bg-color: var(--peertube-menu-background);
+  --chatroom-head-border-bottom: 1px solid var(--peertube-grey-foreground);
+  --chatroom-head-button-color: #999;
+  --chatroom-head-color: var(--peertube-menu-foreground);
+  --chatroom-head-description-border-left: 1px solid #ddd;
+  --chatroom-head-description-color: black;
+  --chatroom-head-description-display: inline;
+  --chatroom-head-description-link-color: #00b3f4;
+  --chatroom-head-description-padding-left: 12px;
+  --chatroom-head-title-font-weight: bold;
+  --chatroom-head-title-padding-right: 12px;
+  --chatroom-width: 500px;
+  --muc-toolbar-btn-color: var(--peertube-button-background);
+  --muc-toolbar-btn-disabled-color: var(--peertube-grey-background);
+  --headline-head-color: var(--orange);
+  --headline-message-color: #d2842b;
+  --chatbox-button-size: 14px;
+  --fullpage-chatbox-button-size: 24px;
+  --font-size-tiny: 10px;
+  --font-size-small: 12px;
+  --font-size: 14px;
+  --font-size-large: 16px;
+  --font-size-huge: 20px;
+  --message-font-size: var(--font-size);
+  --separator-text-color: var(--peertube-grey-foreground);
+  --chat-separator-border-bottom: 1px solid var(--peertube-grey-foreground);
+  --chatroom-separator-border-bottom: 1px solid #aaa;
+  --chatroom-message-input-border-top: 1px solid #ccc;
+  --chatbox-message-input-border-top: 1px solid var(--peertube-menu-background);
+  --line-height-small: 14px;
+  --line-height: 16px;
+  --line-height-large: 20px;
+  --line-height-huge: 27px;
+  --occupants-padding: 1em;
+  --occupants-background-color: var(--peertube-main-background);
+  --occupants-border-left: 1px solid var(--peertube-grey-foreground);
+  --occupants-border-bottom: 1px solid var(--peertube-grey-foreground);
+  --embedded-emoji-picker-height: 300px;
+  --avatar-border-radius: 10%;
+  --fullpage-chat-height: calc(var(--vh, 1vh) * 100);
+  --fullpage-chat-width: 100%;
+  --fullpage-emoji-picker-height: 300px;
+  --fullpage-max-chat-textarea-height: 15em;
+  --overlayed-chat-head-height: 55px;
+  --overlayed-chat-height: 450px;
+  --overlayed-chat-width: 300px;
+  --overlayed-chatbox-hover-height: 1em;
+  --overlayed-emoji-picker-height: 200px;
+  --overlayed-max-chat-textarea-height: 200px;
+  --overlayed-badge-color: #818479; // should not be used in this plugin
+  --list-toggle-color: #818479;
+  --list-toggle-hover-color: #585b51;
+  --list-toggle-font-weight: bold;
+  --list-item-hover-color: rgb(0 0 0 / 3.5%);
+  --list-item-action-color: #e3eef3;
+  --list-item-link-color: #f1f1f1;
+  --list-item-link-hover-color: #ddd;
+  --list-item-open-color: #444;
+  --list-item-open-hover-color: #444;
+  --list-dot-circle-color: #f6dec1;
+}

conversejs/custom/shared/styles/livechat.scss

@@ -0,0 +1,27 @@
+@import "./variables";
+@import "shared/styles/index";
+@import "./peertubetheme";
+
+body.livechat-iframe #conversejs .chat-head {
+  // Hidding the chat-head when the plugin is displayed in an iframe.
+  display: none;
+}
+
+#conversejs-bg {
+  // We are using a custom template that differs from the original, this is required.
+  .converse-brand__heading {
+    img {
+      margin-top: 0.3em;
+    }
+  }
+}
+
+// Readonly mode
+body.livechat-readonly #conversejs {
+  .chat-head,
+  .bottom-panel,
+  converse-message-actions,
+  converse-muc-sidebar {
+    display: none !important;
+  }
+}