Keys unlocking/locking

static/less/main.less

@@ -23,29 +23,8 @@ html, body {
 }
 
 h1 {
-	color: @accent_1;
-}
-
-.layout-crumbs {
-	grid-template-areas:
-		"header"
-		"crumbs"
-		"child-nodes"
-		"name"
-		"content"
-		"files"
-		"blank"
-		;
-	grid-template-columns: 1fr;
-	grid-template-rows:
-		min-content /* header */
-		min-content /* crumbs */
-		min-content /* child-nodes */
-		min-content /* name */
-		min-content /* content */
-		min-content /* files */
-		1fr; /* blank */
-	#tree { display: none }
+	margin-top: 0px;
+	font-size: 1em;
 }
 
 #blackout {
@@ -145,10 +124,23 @@ h1 {
 	}
 }
 
+#properties {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	color: #333;
+	background: #fff;
+	border: 2px solid #000;
+	padding: 16px;
+	z-index: 1025;
+}
+
 header {
 	display: grid;
 	grid-area: header;
-	grid-template-columns: min-content 1fr min-content min-content;
+	grid-template-columns: min-content 1fr repeat(3, min-content);
 	align-items: center;
 	//background: @accent_1;
 	padding: 0px;
@@ -186,6 +178,15 @@ header {
 		cursor: pointer;
 	}
 
+	.keys {
+		padding-right: 16px;
+
+		img {
+			cursor: pointer;
+			height: 24px;
+		}
+	}
+
 	.menu {
 		font-size: 1.25em;
 		padding-right: 16px;
@@ -415,6 +416,35 @@ header {
 	}
 }
 
+#keys {
+	padding: 32px;
+	color: #333;
+
+	.key-list {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 12px 12px;
+		align-items: end;
+		margin-top: 16px;
+		font-size: 0.85em;
+
+		.status {
+			cursor: pointer;
+			img {
+				height: 32px;
+			}
+
+			.locked   { color: #a00 }
+			.unlocked { color: #0a0 }
+		}
+
+		.description {
+			cursor: pointer;
+			padding-bottom: 4px;
+		}
+	}
+}
+
 .layout-tree {// {{{
 	display: grid;
 	grid-template-areas:
@@ -479,6 +509,27 @@ header {
 		1fr; /* blank */
 	#tree { display: none }
 }// }}}
+.layout-keys {
+	display: grid;
+	grid-template-areas:
+		"header"
+		"keys"
+		;
+	grid-template-columns: 1fr;
+	grid-template-rows:
+		min-content /* header */
+		1fr; /* blank */
+	color: #fff;
+	height: 100%;
+
+	#crumbs       { display: none }
+	.child-nodes  { display: none }
+	.node-name    { display: none }
+	.grow-wrap    { display: none }
+	#file-section { display: none }
+	#tree         { display: none }
+	#keys         { display: block }
+}
 
 #app {
 	.layout-tree();