includes fix for #210

Merge branch 'gw/1003-firefoxscrollbars'
5 years ago · f30cfcf20f
3 changed files with 14 additions and 4 deletions
--- a/webroot/index.html
+++ b/webroot/index.html
@ -1,6 +1,7 @@
				@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
+    <title>Owncast</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

@ -77,7 +78,7 @@
				@@ -77,7 +78,7 @@
        <img src="https://owncast.online/images/logo.png" />
        <br/>
        <p>
-          This <a href="https://owncast.online" target="_blank">Owncast</a> stream requires Javascript to play.
+          This <a href="https://owncast.online" rel="noopener noreferrer" target="_blank">Owncast</a> stream requires Javascript to play.
        </p>
      </div>
    </noscript>
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@ -14,6 +14,7 @@ May have overrides for other components with own stylesheets.
				@@ -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 {
				@@ -24,6 +25,9 @@ a:hover {
  width: 0px;
  background: transparent;
 }
+.scrollbar-hidden {
+  scrollbar-width: none; /* moz only */
+}


 #app-container * {
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@ -80,6 +80,7 @@
				@@ -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 @@
				@@ -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;
+}
+

 /******************************/