CSS layout

layout.css

@@ -0,0 +1,127 @@
+
+body{
+	display: grid;
+	grid-template: "menu menu menu" 2em 
+				"main main main" auto 
+				"left middle right" 3em 
+				/ 7em auto 7em;
+	height: 100%;
+	grid-gap: 1em;
+	margin: 0;
+	background: lightgrey;
+	box-sizing: border-box;
+	padding: 1em;
+}
+
+menu { grid-area: menu }
+input[type=file] { display: none; }
+
+ui-data {
+	grid-area: main;
+	margin-top: -1.05em;
+	height: calc(100% + 1.05em);
+	position: relative;
+}
+
+button[encrypt] { grid-area: left }
+pass { grid-area: middle }
+button[decrypt] { grid-area: right }
+
+button[encrypt],
+button[decrypt] {
+	font-weight: bolder;
+	text-transform: uppercase;
+}
+menu {
+	display: flex;
+	height: 2em;
+	margin: 0;
+	padding: 0;
+	padding-left: 1px;
+}
+	menu > * {
+		margin-left: -1px;
+	}
+
+	menu > button {
+		font-size: 1em;
+		height: 2em;
+		width: 2em;
+	}
+		menu > button > i {
+			width: 1em;
+		}
+			menu > button > .fa-caret-up {
+				position: absolute;
+				top: 0.75em;
+			}
+			menu > button > .fa-caret-down {
+				position: absolute;
+				top: 2.2em;
+			}
+
+		[select-get], [select-set], [point], [page] { display: none; }
+		.parented [select-get], .parented [select-set], .parented [point], .parented [page] { display: inherit; }
+
+input[filename] { flex: 1; padding: 0 .5em; }
+
+pass {
+	position: relative;
+	height: 2em;
+	border: 1px solid darkgrey;
+	overflow: hidden;
+}
+	pass i { position: absolute; top: .5em; right: .5em;}
+	pass input {
+		filter: blur(5px);
+		width: 100%;
+		border: none;
+		height: 100%;
+		padding: 0 .5em;
+	}
+		pass input.clear { filter: blur(0) }
+
+i.fa-file {
+	position: relative;
+}
+	i.fa-file.crypted {
+		font-size: 1.5em;
+		color: rebeccapurple;
+	}
+		i.fa-file i.fa-key {
+			position: absolute;
+			font-size: 0.6em;
+			top: .5em;
+			left: -.5em;
+			text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
+			transform: rotate(-50deg) scaleX(-1);
+			font-size: 0.7em;
+		}
+
+i.fa-key {
+	color: lightseagreen
+}
+i.fa-key.pub {
+	color: lawngreen
+}
+i.fa-key.priv {
+	color: orangered
+}
+
+ui-toast {
+	position: fixed;
+	text-align: center;
+	background: white;
+	top: 50%;
+	left: 50%;
+	width: 60em;
+	margin: -1em -30em;
+	height: 2em;
+	box-shadow: 0 0.1em 1em darkgrey;
+	border: 1px solid darkgrey;
+	line-height: 2em;
+}
+	ui-toast[error] {
+		color: red;
+		border-color: red;
+	}