Fixed selected node highlighting

static/css/notes2.css

@@ -13,6 +13,8 @@
 
 	--menu-color: #fff;
 	--menu-item-hover-color: #f4f4f4;
+
+	--font-monospace: "Liberation Mono", monospace;
 }
 
 html {
@@ -23,6 +25,10 @@ html {
 	filter: var(--colorize);
 }
 
+textarea {
+	font-family: var(--font-monospace);
+}
+
 button {
 	font-size: 1em;
 	padding: 4px 8px;
@@ -441,7 +447,6 @@ n2-nodeui {
 		grid-area: content;
 		justify-self: center;
 		word-wrap: break-word;
-		font-family: monospace;
 		font-size: 1em;
 		color: #333;
 
@@ -465,6 +470,10 @@ n2-nodeui {
 		grid-area: content;
 		display: none;
 
+		font-family: var(--font-monospace);
+		font-size: 1em;
+		font-weight: 400;
+
 		border-top: 1px solid #e0e0e0;
 		margin-top: 8px;
 		margin-bottom: 32px;

static/js/sidebar.mjs

@@ -481,7 +481,9 @@ export class N2TreeNode extends CustomHTMLElement {
 		this.tmpl.innerHTML = `
 			<style>
 				n2-sidebar:focus-within {
-					& > .el-name {
+					n2-specialnodedeleted > .el-name,
+					n2-specialnodeorphaned > .el-name,
+					n2-treenode > .el-name {
 						&.selected {
 							span {
 								position:relative;

views/pages/notes2.gotmpl

@@ -1,9 +1,12 @@
 {{ define "page" }}
+<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">
+<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/page_history.css">
+
 
 <!-- Drag and drop elements -->
 
 <!-- page-node -->
-<div id="notes2" class="page-history">
+<div id="notes2" class="page-node">
 	<div id="tree-expander" onclick="window._mbus.dispatch('TREE_EXPANSION', { expand: true })">&gt;</div>
 	<div id="tree" tabindex=0></div>
 
@@ -37,9 +40,6 @@
 	<n2-syncprogress></n2-syncprogress>
 </div>
 
-<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">
-<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/page_history.css">
-
 <script type="module">
 	import {NodeStore} from '/js/{{ .VERSION }}/node_store.mjs'