Design changes

static/css/notes2.css

@@ -10,6 +10,7 @@
 	*/
 	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
 
+	--line-color: #ccc;
 	--tree-expander: 0px;
 	--functions-width: 150px;
 }
@@ -111,7 +112,7 @@ html {
 	color: #333;
 	background-color: #eee;
 	font-weight: bold;
-	border-right: 2px solid #ddd;
+	border-right: 1px solid var(--line-color);
 
 	display: grid;
 	justify-items: center;
@@ -127,6 +128,7 @@ html {
 	}
 }
 
+
 #tree {
 	grid-area: tree;
 	display: grid;
@@ -134,33 +136,7 @@ html {
 	color: #444;
 	z-index: 100;
 
-	border-right: 2px solid #ddd;
-
-	#logo {
-		display: grid;
-		grid-template-columns: min-content 1fr min-content;
-		align-items: center;
-		justify-items: start;
-		cursor: pointer;
-		padding: 16px;
-		border-bottom: 1px solid #ccc;
-
-		.el-search {
-			justify-self: end;
-		}
-
-		img:first-child {
-			height: 24px;
-			margin-right: 8px;
-		}
-	}
-
-	.icons {
-		display: flex;
-		justify-content: center;
-		margin: 16px 0px 32px 0px;
-		gap: 8px;
-	}
+	border-right: 1px solid var(--line-color);
 
 	n2-tree {
 		.el-treenodes {
@@ -168,10 +144,6 @@ html {
 		}
 	}
 
-	&:focus-within {
-		n2-tree {}
-	}
-
 	.node {
 		display: grid;
 		grid-template-columns: 40px min-content;

static/js/tree.mjs

@@ -64,16 +64,61 @@ export class N2Tree extends CustomHTMLElement {
 		this.tmpl.innerHTML = `
 			<style>
 				n2-tree {
+					anchor-name: --tree;
+
+					#logo {
+						display: grid;
+						grid-template-columns: 1fr min-content;
+						align-items: center;
+						justify-items: start;
+						cursor: pointer;
+						padding: 16px;
+						border-bottom: 1px solid var(--line-color);
+
+						img:first-child {
+							height: 24px;
+							margin-right: 8px;
+						}
+					}
+
+					.icons {
+						display: flex;
+						justify-content: center;
+						margin: 16px 0px 32px 0px;
+						gap: 8px;
+						padding-bottom: 16px;
+						border-bottom: 1px solid var(--line-color);
+					}
+
+
 					.el-hide-tree {
 						font-size: 1.25em;
 						font-weight: bold;
 						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 src="/images/${_VERSION}/logo_small.svg" />
 				<img data-el="logo" src="/images/${_VERSION}/logo.svg" />
 				<div data-el="hide-tree">&lt;</div>
 			</div>