Added basic multidevice support

static/css/index.css

@@ -1,4 +1,6 @@
 :root {
+	--header-background: #acbb78;
+
 	--line-color: #ccc;
 	--line-color-record: #eee;
 
@@ -37,14 +39,27 @@ html {
 	cursor: pointer;
 }
 
+h1 {
+	font-size: 1.5em;
+
+	&:first-child {
+		margin-top: 0px;
+	}
+}
+
 label {
 	user-select: none;
 }
 
+html,
+body {
+	margin: 0px;
+	padding: 0px;
+}
+
 body {
 	font-family: sans-serif;
 	font-size: 12pt;
-	margin-left: 32px;
 
 	/* Boxed folders are a settings for the user. */
 	&.boxed-folders {
@@ -90,28 +105,63 @@ button {
 	padding: 4px 8px;
 }
 
-#create-icon {
-	position: absolute;
-	top: 18px;
-	right: 64px;
-	width: 24px;
-	cursor: pointer;
-}
+#application-header {
+	display: grid;
+	grid-template-columns: min-content 1fr min-content min-content;
+	align-items: center;
+	border-bottom: 1px solid #a4bc52;
+	background-color: var(--header-background);
 
-#settings-icon {
-	position: absolute;
-	top: 16px;
-	right: 16px;
-	width: 32px;
-	cursor: pointer;
-}
 
-#search {
-	margin-bottom: 16px;
+	.device-select {
+		padding: 16px 16px 16px 32px;
+
+		.device-name {
+			font-weight: bold;
+		}
+	}
+
+	#search {
+		padding: 16px;
+		display: grid;
+		grid-template-columns: min-content min-content;
+		grid-gap: 0px 8px;
+
+		&>* {
+			display: none;
+		}
+
+		&.show {
+			&>* {
+				display: initial;
+			}
+		}
+
+		.search-label {
+			grid-column: 1 / -1;
+			font-weight: bold;
+		}
+	}
+
+	#create-icon {
+		width: 24px;
+		cursor: pointer;
+		margin-right: 16px;
+	}
+
+	#settings-icon {
+		width: 32px;
+		cursor: pointer;
+		margin-right: 16px;
+	}
+
 }
 
 #records-tree {
 	white-space: nowrap;
+	margin-top: calc(32px - 5px);
+	/* padding from the topmost folder */
+	margin-left: 32px;
 
 	.folder {
 		padding-left: 32px;
@@ -120,7 +170,7 @@ button {
 			padding-left: 0px;
 		}
 
-		&.no-domain > .label {
+		&.no-domain>.label {
 			font-style: italic;
 		}