edit header text color for emoji picker

assets/styles/video/_container.scss

@@ -28,6 +28,57 @@
   height: 100%;
 
   converse-muc {
-    min-height: max(30vh, 200px);
+    min-height: max(58vh, 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;
+}

conversejs/custom/shared/styles/_peertubetheme.scss

@@ -52,15 +52,16 @@
 
       .emoji-picker__header {
         color: var(--peertube-main-background);
-        background-color: var(--peertube-main-foreground);
+        background-color: var(--peertube-main-background);
 
         ul {
           .emoji-category {
             color: var(--peertube-main-background);
-            background-color: var(--peertube-main-foreground);
+            background-color: #2d2d2d;
+            border-bottom: 1px solid var(--peertube-main-foreground);
 
             a {
-              color: currentcolor;
+              color: white;
             }
 
             &.picked {
@@ -134,17 +135,19 @@
 
     // Changing size for emojis, to have bigger custom emojis
     img.emoji {
-      width: unset !important;
+      width: 3.5rem !important;
-      height: unset !important;
+      height: 3.5rem !important;
-      max-height: 3em !important; // and no max-width
+      // max-height: 4.25em !important; // and no max-width
     }
 
     // underline links in chat messages
     a[href] {
-      text-decoration: underline;
+      text-decoration: none !important;
+      color: #f57200 !important;
 
       &:hover {
-        text-decoration: underline;
+        text-decoration: underline !important;
+        color: #D16100 !important;
       }
     }
   }
@@ -188,6 +191,12 @@
     }
   }
 
+/* NCTV custom */
+
+.emoji-category__heading {
+  color: white !important;
+}
+
   // Bigger occupants sidebar when width is not big enough.
   @media screen and (max-width: 576px) {
     .chatroom .box-flyout .chatroom-body .occupants {

conversejs/custom/shared/styles/_variables.scss

@@ -64,8 +64,8 @@ body.converse-embedded converse-root.theme-peertube {
   --message-avatar-height: 36px;
   --chat-background-color: var(--peertube-main-background);
   --chat-textarea-color: var(--peertube-input-foreground);
-  --chat-textarea-background-color: var(--peertube-input-background);
+  --chat-textarea-background-color: var(--peertube-main-background);
-  --chat-textarea-height: 60px;
+  --chat-textarea-height: 38px;
   --send-button-height: 27px;
   --send-button-margin: 3px;
   --inline-action-margin: 0.75em;
@@ -140,8 +140,8 @@ body.converse-embedded converse-root.theme-peertube {
   --fullpage-chatbox-button-size: 24px;
   --font-size-tiny: 10px;
   --font-size-small: 12px;
-  --font-size: 14px;
+  --font-size: 16px;
-  --font-size-large: 16px;
+  --font-size-large: 18px;
   --font-size-huge: 20px;
   --message-font-size: var(--font-size);
   --separator-text-color: var(--peertube-grey-foreground);

conversejs/custom/shared/styles/livechat.scss

@@ -170,7 +170,9 @@ body.converse-embedded {
 #peertube-plugin-livechat-container {
   converse-muc-message-form {
     // For an unknown reason, message field in truncated... so adding a bottom margin.
-    margin-bottom: 6px;
+    max-height: unset !important;
+    margin-bottom: 0.5rem !important;
+    margin-top: 0.4rem !important;
   }
 }
 

package.json

@@ -1,13 +1,13 @@
 {
   "name": "peertube-plugin-livechat",
-  "description": "PeerTube plugin livechat: create chat rooms for your Peertube lives! Comes with many features: federation, moderation tools, chat bot, chat persistence, OBS integration, ...",
+  "description": "NCTV fork of the peertube-plugin-livechat plugin, containing styling and other shit. This will be maintained with upstream.",
   "version": "10.1.2",
   "license": "AGPL-3.0",
   "author": {
-    "name": "John Livingston",
+    "name": "Matty Boombalatty",
-    "url": "https://github.com/JohnXLivingston"
+    "url": "https://gitea.nicecrew.digital/matty"
   },
-  "bugs": "https://github.com/JohnXLivingston/peertube-plugin-livechat/issues",
+  "bugs": "https://gitea.nicecrew.digital/matty/peertube-plugin-livechat/issues",
   "clientScripts": [
     {
       "script": "dist/client/common-client-plugin.js",
@@ -82,8 +82,8 @@
   "engines": {
     "npm": ">=7"
   },
-  "homepage": "https://livingston.frama.io/peertube-plugin-livechat/",
+  "homepage": "https://nicecrew.tv",
-  "repository": "github:JohnXLivingston/peertube-plugin-livechat",
+  "repository": "https://gitea.nicecrew.digital/matty/peertube-plugin-livechat",
   "keywords": [
     "peertube",
     "plugin"