peertube-plugin-livechat/assets/styles/video/_container.scss

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

 #peertube-plugin-livechat-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  // Bigger occupants sidebar when embedded near a video.
  .chatroom .box-flyout .chatroom-body .occupants {
    min-width: min(200px, 50%);
  }
}

/* Note: livechat-viewer-mode-content (the form where anonymous users can
    choose nickname or log in with external account), can be something like
    ~180px height (at time of writing).
    We must ensure that the 200px limit for converse-muc and converse-root is
    always higher than livechat-viewer-mode-content max size.
*/
#peertube-plugin-livechat-container converse-root {
  display: block;
  border: 1px solid black;
  min-height: max(30vh, 200px); // Always at least 200px, and ideally at least 30% of viewport.
  height: 100%;

  converse-muc {
    min-height: max(59vh, 400px);
  }
}

// /* Media query for mobile devices */
// @media only screen and (max-width: 767px) {
//   #peertube-plugin-livechat-container converse-root {
//     converse-muc {
//       min-height: 58vh;
//       /* 100vh - 30vh for video = 70vh remaining */
//     }
//   }
// }

// /* Media query for tablets in portrait mode */
// @media only screen and (min-width: 768px) and (max-width: 1023px) {
//   #peertube-plugin-livechat-container converse-root {
//     converse-muc {
//       min-height: 25vh;
//       /* Slightly less to account for other elements */
//     }
//   }
// }

// /* Media query for tablets in landscape mode */
// @media only screen and (min-width: 1024px) and (max-width: 1279px) {
//   #peertube-plugin-livechat-container converse-root {
//     converse-muc {
//       min-height: 25vh;
//       /* Assuming more height can be used */
//     }
//   }
// }

/* Media query for desktops */
@media only screen and (min-width: 1280px) {
  #peertube-plugin-livechat-container converse-root {
    converse-muc {
      height: inherit;
      /* Full desktop experience */
    }
  }
}


/* custom toolbar CSS */ 

.send-button {
  border-radius: 0.25rem !important;
}

.send-button:hover {
  background-color: #0067c1 !important;
}