Implement little arrows for menus and dialogs

src/screen.css

@@ -28,6 +28,13 @@ body {
 	height: 4.4em;
 }
 
+#screen .text.read:after {
+	content: "\25be";
+	position: absolute;
+	bottom: 0.1em;
+	right: 0.5em;
+}
+
 #screen .text p {
 	margin: 0;
 	padding: 0.5em;
@@ -39,9 +46,11 @@ ul.menu {
 	margin: 0;
 }
 
-ul.menu .selected {
-	background: #000;
-	color: #fff;
+ul.menu .selected:before {
+	content: "\25b8";
+	width: 0.8em;
+	margin-left: -0.8em;
+	display: inline-block;
 }
 
 /* 1st frame */

src/screen.js

@@ -39,8 +39,11 @@ function Screen(dom) {
 		return textZone
 	}
 
-	function markAsRead() {
-		getTextZone().classList.add('read');
+	function markAsRead(yes) {
+		if(yes == undefined) {
+			yes = false;
+		}
+		getTextZone().classList[yes ? 'add' : 'remove']('read');
 	}
 
 	function menu(entries) {
@@ -68,8 +71,6 @@ function Screen(dom) {
 
 	function text(message) {
 		getTextZone().children[0].textContent = message;
-		if(message.length > 0) {
-			markAsRead();
-		}
+		markAsRead(message.length > 0);
 	}
 }