Merge pull request #2 from tommyrot/main

couple styling tweaks and hinting

superchat/include/style.css

@@ -4,6 +4,12 @@
 	box-sizing: border-box;
 }
 
+/* Firefox scrollbar */
+* {
+	scrollbar-width: thin;
+	scrollbar-color: #333 #0a0a0a;
+}
+
 ::-webkit-scrollbar {
 	width: 6px;
 }
@@ -103,6 +109,9 @@ body {
 	font-size: 14px;
 	outline: none;
 	width: 280px;
+	-webkit-appearance: none;
+	appearance: none;
+	border-radius: 0;
 }
 
 #login-server:focus, #login-port:focus, #login-nick:focus, #login-channels:focus {
@@ -276,7 +285,7 @@ body {
 	padding: 0 0 0 26ch;
 	text-indent: -26ch;
 	white-space: pre-wrap;
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 }
 
 .timestamp {
@@ -334,6 +343,10 @@ body {
 	padding: 2px;
 }
 
+#toggle-chanlist {
+	margin-right: 10px;
+}
+
 #toggle-chanlist:hover, #toggle-nicklist:hover {
 	color: #fff;
 }
@@ -356,6 +369,7 @@ body {
 	-webkit-tap-highlight-color: transparent;
 	flex-shrink: 0;
 	padding: 2px 4px;
+	margin-left: 10px;
 	font-size: 12px;
 	font-weight: bold;
 	user-select: none;
@@ -390,13 +404,17 @@ body {
 	border: none;
 	padding: 6px 6px;
 	font-family: 'Courier New', 'Lucida Console', monospace;
-	font-size: 16px;
+	font-size: 14px;
 	outline: none;
 	-webkit-appearance: none;
 	appearance: none;
 	border-radius: 0;
 }
 
+#input:focus::placeholder {
+	color: transparent;
+}
+
 /* --- Nick list --- */
 #nicklist {
 	width: 140px;

superchat/index.html

@@ -42,7 +42,7 @@
 		</div>
 		<div id="input-row">
 			<span id="input-nick"></span>
-			<input type="text" id="input" spellcheck="false" autocapitalize="off" autocomplete="off">
+			<input type="text" id="input" placeholder="Type here..." spellcheck="false" autocapitalize="off" autocomplete="off">
 		</div>
 	</div>
 	<script src="./include/script.js"></script>