Small UI changes

static/js/tree.mjs

@@ -64,8 +64,6 @@ export class N2Tree extends CustomHTMLElement {
 		this.tmpl.innerHTML = `
 			<style>
 				n2-tree {
-					anchor-name: --tree;
-
 					#logo {
 						display: grid;
 						grid-template-columns: 1fr min-content;
@@ -97,27 +95,8 @@ export class N2Tree extends CustomHTMLElement {
 						cursor: pointer;
 						margin-left: 16px;
 					}
-
-					.focusline {
-						position: fixed;
-						background-color: #a00;
-						top: 0px;
-						left: anchor(--tree left);
-						right: anchor(--tree right);
-						height: 2px;
-						opacity: 0;
-					}
-
-					&:focus-within {
-						.focusline {
-							opacity: 1;
-							background-color: #fff;
-							transition: background-color 150ms;
-						}
-					}
 				}
 			</style>
-			<div class="focusline"></div>
 			<div id="logo">
 				<img data-el="logo" src="/images/${_VERSION}/logo.svg" />
 				<div data-el="hide-tree">&lt;</div>
@@ -492,10 +471,35 @@ export class N2TreeNode extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
+			<style>
+				n2-tree:focus-within {
+					.el-name {
+						&.selected {
+							span {
+								position:relative;
+							}
+							span:before {
+								position: absolute;
+								content: '';
+								top: -8px;
+								left: -36px;
+								right: -8px;
+								bottom: -4px;
+								z-index: -1;
+
+								background-color: #f8f8f8;
+								border: 1px solid #ddd;
+								border-radius: 4px;
+							}
+						}
+					}
+				}
+			</style>
+
 			<div data-el="expand-toggle" class="expand-toggle">
 				<img data-el="expand">
 			</div>
-			<div data-el="name" class="name"></div>
+			<div data-el="name" class="name"><span></span></div>
 			<div data-el="children" class="children"></div>
 		`
 	}// }}}
@@ -541,7 +545,8 @@ export class N2TreeNode extends CustomHTMLElement {
 		}
 
 		// Update the name and selected status
-		this.elName.innerText = this.node.get('Name')
+		this.elName.querySelector('span').innerText = this.node.get('Name')
+
 		if (this.tree.isSelected(this.node))
 			this.elName.classList.add('selected')
 		else