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

/*
 * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */

#conversejs.theme-peertube {
  .dropdown-menu {
    // Fixing all dropdown colors
    --text-color: #212529; // default bootstrap color for dropdown-items
    --inverse-link-color: #8c8c8c; // default ConverseJS theme color

    background-color: #fff; // this is the default bootstrap color, used by ConverseJS

    a,
    i,
    button {
      --text-color: #212529; // default bootstrap color for dropdown-items

      color: #212529; // default bootstrap color for dropdown-items
    }
  }

  .chatbox {
    // Slow mode info box
    .livechat-slow-mode-info-box {
      border: 1px dashed var(--peertube-menu-background);
      color: var(--peertube-main-foreground);
      background-color: var(--peertube-main-background);
      margin: 0 5px;

      .livechat-hide-slow-mode-info-box {
        cursor: pointer;
        font-size: var(--font-size-small);
      }
    }

    // Emoji only info box
    .livechat-emoji-only-info-box {
      border: 1px dashed var(--peertube-menu-background);
      color: var(--peertube-main-foreground);
      background-color: var(--peertube-main-background);
      margin: 0 5px;
    }

    converse-chat-toolbar {
      border-top: none !important; // removing border, to avoid confusing the toolbar with an input field.
      color: var(--peertube-main-foreground);
      background-color: var(--peertube-main-background);
    }

    // Fixing emoji colors for some emoji like «motorcycle»
    converse-emoji-picker {
      // Must set display block. Without this, Converse defined max-width will not apply.
      // Don't really know why it is working in pure ConverseJs and not in livechat.
      display: block;

      .emoji-picker {
        .insert-emoji {
          a {
            color: currentcolor;
          }
        }
      }

      .emoji-picker__header {
        background-color: var(--peertube-main-background);
        color: var(--peertube-main-foreground);

        .emoji-search {
          color: currentcolor;
        }

        ul {
          .emoji-category {
            background-color: var(--peertube-main-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);
    }
  }

  .form-control {
    /* Cancelling some bootstrap stuff */
    border-color: var(--chatroom-head-bg-color);
    box-shadow: none;

    &:focus {
      border-color: var(--chatroom-head-bg-color);
      outline: 2px solid var(--chatroom-head-bg-color);
      box-shadow: none;
    }
  }

  .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;
    }

    // Changing size for emojis, to have bigger custom emojis
    img.emoji {
      width: unset !important;
      height: unset !important;
      max-height: 3em !important; // and no max-width
    }

    // 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;
  }

  .suggestion-box__results {
    // To make the autocompletes results more readable, adding a border (orange for the default theme)
    border-color: var(--peertube-button-background);
  }

  // hidding avatars when screen width is not big enough.
  // The livechat-converse-root-width attributes comes from the 'size' plugin.
  &[livechat-converse-root-width="small"] {
    .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,
        converse-avatar {
          display: none;
        }

        .chat-msg__body {
          margin-left: 1em;
        }
      }
    }
  }

  // Bigger occupants sidebar when width is not big enough.
  @media screen and (width <= 576px) {
    .chatroom .box-flyout .chatroom-body .occupants {
      min-width: 50%;
    }
  }
}