peertube-plugin-livechat/conversejs/custom/shared/styles/livechat.scss

@import "./variables";
@import "shared/styles/index";
@import "./peertubetheme";

body.livechat-iframe,
#peertube-plugin-livechat-container {
  #conversejs .chat-head {
    // Hidding the chat-head when the plugin is displayed in an iframe or besides a video.
    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 {
  /* stylelint-disable-next-line no-descending-specificity */
  .chat-head,
  .bottom-panel,
  converse-message-actions,
  converse-muc-sidebar {
    display: none !important;
  }
}

body.livechat-readonly.livechat-noscroll {
  converse-chat-content {
    overflow-y: hidden !important;
  }

  .message.separator,
  .message.date-separator {
    // also hide separators (new day, new message)
    display: none;
  }
}

// Viewer mode
.livechat-viewer-mode-nick {
  display: none;
}

body[livechat-viewer-mode="on"] {
  .livechat-viewer-mode-nick {
    display: initial;

    form {
      display: flex !important;
      flex-flow: row wrap !important;
      padding-bottom: 0.5em !important;
      border-top: var(--chatroom-separator-border-bottom) !important;
      gap: 10px;
      align-items: baseline;

      label {
        color: var(--text-color); // fix converseJs css that breaks this label color.
      }
    }
  }

  converse-muc-bottom-panel {
    >:not(.livechat-viewer-mode-nick) {
      display: none;
    }
  }
}

// Transparent mode
body.livechat-transparent {
  // --peertube-main-background: rgba(0 0 0 / 0%) !important;
  // --peertube-menu-background: rgba(0 0 0 / 0%) !important;

  &.converse-fullscreen {
    background-color: var(--livechat-transparent) !important;
  }

  .chat-body,
  .conversejs .chatroom .box-flyout,
  .conversejs .chatbox .chat-content,
  .conversejs .chatbox .chat-content .chat-content__notifications {
    background-color: rgba(0 0 0 / 0%) !important;
  }

  // Hide the background_logo
  #conversejs-bg {
    display: none !important;
  }
}

/* Chat directly embedded in Peertube */
body.converse-embedded {
  .conversejs .modal {
    // modal z-index = use same z-index as Peertube (see Peertube _variables.scss)
    z-index: 19000;
  }

  .modal-backdrop {
    // must be just under .modal.
    z-index: 18999;
  }
}

/* Chat embedded in a full client page. */
.livechat-embed-fullpage {
  converse-root {
    display: block;
    height: 90vh;
    min-height: 400px;
  }
}

.livechat-embed-fullpage,
#peertube-plugin-livechat-container {
  converse-muc-message-form {
    // For an unknown reason, message field in truncated... so adding a bottom margin.
    margin-bottom: 6px;
  }
}