ssb: Add some more visibility that you're above the unread line. #122

apps/ssb/tf-message.js

@@ -1,4 +1,11 @@
-import {LitElement, html, repeat, render, unsafeHTML} from './lit-all.min.js';
+import {
+	LitElement,
+	css,
+	html,
+	repeat,
+	render,
+	unsafeHTML,
+} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import * as tfutils from './tf-utils.js';
 import * as emojis from './emojis.js';
@@ -20,7 +27,14 @@ class TfMessageElement extends LitElement {
 		};
 	}
 
-	static styles = styles;
+	static styles = [
+		...styles,
+		css`
+			.unread {
+				border-left: 2px solid red !important;
+			}
+		`,
+	];
 
 	constructor() {
 		super();
@@ -408,7 +422,7 @@ class TfMessageElement extends LitElement {
 		return this.message?.decrypted
 			? 'w3-pale-red'
 			: this.message?.rowid >= this.channel_unread
-				? 'w3-theme-d2'
+				? 'w3-theme-d2 unread'
 				: 'w3-theme-d4';
 	}