From ab1eb69fd1eeeed5326db5037de3bf703d8be563 Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Sat, 3 Oct 2020 13:42:48 -0700
Subject: [PATCH] apply scrollbar tricks to moz browser; make scroll colors on
 emoji picker easier to see; make emoji hover color easier to see

---
 webroot/js/app.js       | 2 +-
 webroot/styles/app.css  | 4 ++++
 webroot/styles/chat.css | 9 +++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/webroot/js/app.js b/webroot/js/app.js
index 9fe34ca40..96eea8520 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -554,7 +554,7 @@ export default class App extends Component {
           websocket=${websocket}
           username=${username}
           userAvatarImage=${userAvatarImage}
-          chatInputEnabled=${chatInputEnabled}
+          chatInputEnabled=${true||chatInputEnabled}
         />
       </div>
     `;
diff --git a/webroot/styles/app.css b/webroot/styles/app.css
index 30774ee2b..d3fa92a3e 100644
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -14,6 +14,7 @@ May have overrides for other components with own stylesheets.
 
 html {
   font-size: 14px;
+  scrollbar-width: none;
 }
 
 a:hover {
@@ -24,6 +25,9 @@ a:hover {
   width: 0px;
   background: transparent;
 }
+.scrollbar-hidden {
+  scrollbar-width: none; /* moz only */
+}
 
 
 #app-container * {
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index eab6d9932..362c2c7ac 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -80,6 +80,7 @@
 .emoji-picker.owncast {
   --secondary-text-color: rgba(255,255,255,.5);
   --category-button-color:  rgba(255,255,255,.5);
+  --hover-color: rgba(255,255,255,.25);
 
   background: rgba(26,32,44,1); /* tailwind bg-gray-900 */
   color: rgba(226,232,240,1); /* tailwind text-gray-300 */
@@ -101,15 +102,19 @@
 }
 .emoji-picker__emojis::-webkit-scrollbar-track {
   border-radius: 8px;
-  background-color: rgba(0,0,0,.2);
+  background-color: black;
   box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
 }
 
 .emoji-picker__emojis::-webkit-scrollbar-thumb {
-  background-color: rgba(0,0,0,.45);
+  background-color: var(--category-button-color);
   border-radius: 8px;
 }
 
+.emoji-picker__emojis {
+  scrollbar-color: var(--category-button-color)  black;
+}
+
 
 /******************************/