Use pure CSS

sql/00006.sql

@@ -1,16 +1 @@
-CREATE TABLE public.node_history (
+DROP INDEX public.node_uuid_idx;
-	id serial4 NOT NULL,
-	user_id int4 NOT NULL,
-	uuid bpchar(36) NOT NULL,
-	parents varchar[] NULL,
-	created timestamptz NOT NULL,
-	updated timestamptz NOT NULL,
-	name varchar(256) NOT NULL,
-	"content" text NOT NULL,
-	content_encrypted text NOT NULL,
-	markdown bool DEFAULT false NOT NULL,
-	client bpchar(36) DEFAULT ''::bpchar NOT NULL,
-	CONSTRAINT node_history_pk PRIMARY KEY (id),
-	CONSTRAINT node_history_user_fk FOREIGN KEY (user_id) REFERENCES public."user"(id) ON DELETE RESTRICT ON UPDATE RESTRICT
-);
-CREATE INDEX node_history_uuid_idx ON public.node USING btree (uuid);

static/css/login.css

@@ -1,11 +1,15 @@
+@import "theme.css";
+
 #app {
 	display: grid;
 	justify-items: center;
 	margin-top: 128px;
 }
+
 #logo {
 	margin-bottom: 48px;
 }
+
 #box {
 	display: grid;
 	grid-gap: 16px 0;
@@ -14,24 +18,27 @@
 	padding: 48px 0px;
 	background-color: #fff;
 	box-shadow: 0px 20px 52px -33px rgba(0,0,0,0.75);
-  border-left: 8px solid #666;
+	border-left: 8px solid var(--color3);
-}
+
-#box input {
+	input {
 		padding: 4px 8px;
 		font-size: 1em;
 		width: calc(100% - 64px);
 		border: 1px solid #aaa;
 		border-radius: 4px;
 	}
-#box button {
+
+	button {
 		padding: 6px 16px;
 		font-size: 1em;
 		border-radius: 4px;
 		border: none;
-  background-color: #fe5f55;
+		background-color: var(--color1);
 		color: #fff;
 	}
-#box #error {
+
+	#error {
 		color: #c33;
 		margin-top: 16px;
 	}
+}

static/css/main.css

@@ -1,23 +1,29 @@
+@import "theme.css";
+
 html {
 	box-sizing: border-box;
-  background: #efede8;
+	background: var(--color2);
 	font-family: "Liberation Mono", monospace;
 	font-size: 14px;
 	margin: 0px;
 	padding: 0px;
 }
+
 body {
 	margin: 0px;
 	padding: 0px;
 }
+
 *,
 *:before,
 *:after {
 	box-sizing: inherit;
 }
+
 *:focus {
 	outline: none;
 }
+
 [onClick] {
 	cursor: pointer;
 }

static/css/notes2.css

@@ -1,34 +1,68 @@
+@import "theme.css";
+
 html {
 	background-color: #fff;
 }
+
 #notes2 {
 	min-height: 100vh;
+
 	display: grid;
-  grid-template-areas: "tree crumbs" "tree sync" "tree name" "tree content" "tree blank";
+	grid-template-areas:
+		"tree crumbs"
+		"tree sync"
+		"tree name"
+		"tree content"
+		/*
+		"tree checklist"
+		"tree schedule"
+		"tree files"
+		*/
+		"tree blank"
+		;
 	grid-template-columns: min-content 1fr;
-  grid-template-rows: 48px 56px 48px min-content 1fr;
+	grid-template-rows:
-}
+		48px
+		56px
+		48px
+		min-content
+		1fr;
+
+
 	@media only screen and (max-width: 600px) {
-  #notes2 {
+		grid-template-areas:
-    grid-template-areas: "crumbs" "sync" "name" "content" "blank";
+			"crumbs"
+			"sync"
+			"name"
+			"content"
+			/*
+			"checklist"
+			"schedule"
+			"files"
+			*/
+			"blank"
+			;
 		grid-template-columns: 1fr;
-  }
+
-  #notes2 #tree {
+		#tree {
 			display: none;
 		}
 	}
+}
+
 #tree {
 	grid-area: tree;
 	display: grid;
 	padding: 16px 0px 16px 16px;
 	color: #ddd;
-  z-index: 100;
+	z-index: 100; /* Over crumbs shadow */
 	border-left: 2px solid #333;
-}
+
-#tree:focus {
+	&:focus {
 		border-left: 2px solid #FE5F55;
 	}
-#tree #logo {
+
+	#logo {
 		display: grid;
 		position: relative;
 		justify-items: center;
@@ -37,65 +71,82 @@ html {
 		margin-left: 24px;
 		margin-right: 24px;
 		cursor: pointer;
-}
+
-#tree #logo img {
+		img {
 			width: 128px;
 			left: -20px;
+
 		}
-#tree .icons {
+	}
+
+	.icons {
 		display: flex;
 		justify-content: center;
 		margin-bottom: 32px;
 		gap: 8px;
 	}
-#tree .node {
+
+	.node {
 		display: grid;
 		grid-template-columns: 24px min-content;
-  grid-template-rows: min-content 1fr;
+		grid-template-rows:
+			min-content
+			1fr;
 		margin-top: 12px;
-}
+
-#tree .node .expand-toggle {
+
+		.expand-toggle {
 			user-select: none;
-}
+			img {
-#tree .node .expand-toggle img {
 				width: 16px;
 				height: 16px;
 			}
-#tree .node .name {
+		}
+
+		.name {
 			white-space: nowrap;
 			cursor: pointer;
 			user-select: none;
+
+			&:hover {
+				color: var(--color1);
 			}
-#tree .node .name:hover {
+			&.selected {
-  color: #fe5f55;
+				color: var(--color1);
-}
-#tree .node .name.selected {
-  color: #fe5f55;
 				font-weight: bold;
 			}
-#tree .node .children {
+
+		}
+
+		.children {
 			padding-left: 24px;
 			margin-left: 8px;
 			border-left: 1px solid #444;
 			grid-column: 1 / -1;
-}
+
-#tree .node .children.collapsed {
+			&.collapsed {
 				display: none;
 			}
+		}
+	}
+}
+
 #tree-nodes {
 	padding: 16px 32px;
 	background-color: #333;
 	border-radius: 8px;
 	box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.75);
 }
+
 #crumbs {
 	grid-area: crumbs;
 	display: grid;
 	align-items: start;
 	justify-items: center;
 	margin: 16px 16px;
-}
+
-#crumbs .crumbs {
+	.crumbs {
+		background: #e4e4e4;
 		display: flex;
 		flex-wrap: wrap;
 		padding: 8px 16px;
@@ -103,72 +154,88 @@ html {
 		color: #333;
 		border-bottom-left-radius: 5px;
 		border-bottom-right-radius: 5px;
+
+		&.node-modified {
+			background-color: var(--color1);
+			color: var(--color2);
+			.crumb:after {
+				color: var(--color2);
 			}
-#crumbs .crumbs.node-modified {
-  background-color: #fe5f55;
-  color: #efede8;
 		}
-#crumbs .crumbs.node-modified .crumb:after {
+
-  color: #efede8;
+		.crumb {
-}
-#crumbs .crumbs .crumb {
 			margin-right: 8px;
 			cursor: pointer;
 			user-select: none;
 			-webkit-tap-highlight-color: transparent;
-}
+
-#crumbs .crumbs .crumb a {
+			a {
 				text-decoration: none;
 				color: inherit;
 			}
-#crumbs .crumbs .crumb:after {
+		}
+
+		.crumb:after {
 			content: "•";
 			margin-left: 8px;
-  color: #fe5f55;
+			color: var(--color1)
 		}
-#crumbs .crumbs .crumb:last-child {
+
+		.crumb:last-child {
 			margin-right: 0;
 		}
-#crumbs .crumbs .crumb:last-child:after {
+		.crumb:last-child:after {
 			content: '';
 			margin-left: 0px;
 		}
+
+	}
+
+}
+
 #sync-progress {
 	grid-area: sync;
 	display: grid;
 	justify-items: center;
+	
 	width: 100%;
 	height: 56px;
 	position: relative;
-}
+
-#sync-progress progress {
+	progress {
 		width: 100%;
 		padding: 0 7px;
 		max-width: 900px;
 		height: 16px;
 		border-radius: 4px;
 	}
-#sync-progress progress[value]::-webkit-progress-bar {
+
+	progress[value]::-webkit-progress-bar {
 		background-color: #eee;
 		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
 		border-radius: 4px;
 	}
-#sync-progress progress[value]::-moz-progress-bar {
+
+	progress[value]::-moz-progress-bar {
 		background-color: #eee;
 		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
 		border-radius: 4px;
 	}
-#sync-progress progress[value]::-webkit-progress-value {
+
-  background: #ba5f59;
+	progress[value]::-webkit-progress-value {
-  background: linear-gradient(180deg, #ba5f59 0%, #fe5f55 50%, #ba5f59 100%);
+		background: rgb(186,95,89);
+		background: linear-gradient(180deg, rgba(186,95,89,1) 0%, rgba(254,95,85,1) 50%, rgba(186,95,89,1) 100%);
 		border-radius: 4px;
 	}
-#sync-progress progress[value]::-moz-progress-value {
+
-  background: #ba5f59;
+	/* TODO: style the progress value for Firefox */
-  background: linear-gradient(180deg, #ba5f59 0%, #fe5f55 50%, #ba5f59 100%);
+	progress[value]::-moz-progress-value {
+		background: rgb(186,95,89);
+		background: linear-gradient(180deg, rgba(186,95,89,1) 0%, rgba(254,95,85,1) 50%, rgba(186,95,89,1) 100%);
 		border-radius: 4px;
 	}
-#sync-progress .count {
+
+	.count {
 		width: min-content;
 		white-space: nowrap;
 		margin-top: 0px;
@@ -176,11 +243,15 @@ html {
 		position: absolute;
 		top: 22px;
 	}
-#sync-progress.hidden {
+
+	&.hidden {
 		visibility: hidden;
 		opacity: 0;
 		transition: visibility 0s 500ms, opacity 500ms linear;
 	}
+
+}
+
 #name {
 	color: #333;
 	font-weight: bold;
@@ -189,6 +260,7 @@ html {
 	margin-top: 0px;
 	margin-bottom: 16px;
 }
+
 /* ============================================================= *
  * Textarea replicates the height of an element expanding height *
  * ============================================================= */
@@ -196,11 +268,12 @@ html {
 	/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
 	display: grid;
 	grid-area: content;
-  font-size: 1em;
+	font-size: 1.0em;
 }
 .grow-wrap::after {
 	/* Note the weird space! Needed to preventy jumpy behavior */
 	content: attr(data-replicated-value) " ";
+
 	/* This is how textarea text behaves */
 	width: calc(100% - 32px);
 	max-width: 900px;
@@ -208,12 +281,14 @@ html {
 	word-wrap: break-word;
 	background: rgba(0, 255, 255, 0.5);
 	justify-self: center;
+
 	/* Hidden from view, clicks, and screen readers */
 	visibility: hidden;
 }
 .grow-wrap > textarea {
 	/* You could leave this, but after a user resizes, then it ruins the auto sizing */
 	resize: none;
+
 	/* Firefox shows scrollbar on growth, you can hide like this. */
 	overflow: hidden;
 }
@@ -222,10 +297,12 @@ html {
 	/* Identical styling required!! */
 	padding: 0.5rem;
 	font: inherit;
+
 	/* Place on top of each other */
 	grid-area: 1 / 1 / 2 / 2;
 }
 /* ============================================================= */
+
 #node-content {
 	justify-self: center;
 	word-wrap: break-word;
@@ -236,41 +313,57 @@ html {
 	resize: none;
 	border: none;
 	outline: none;
-}
+
-#node-content:invalid {
+	&:invalid {
 		background: #f5f5f5;
 		padding-top: 16px;
 	}
+}
+
 #blank {
 	grid-area: blank;
 	height: 32px;
 }
-dialog.op::backdrop {
+
+dialog.op {
+	&::backdrop {
 		background: rgba(0, 0, 0, 0.5);
 	}
-dialog.op .header {
+	
+	.header {
 		font-weight: bold;
 		margin-top: 16px;
-}
+
-dialog.op .header:first-child {
+		&:first-child {
 			margin-top: 0px;
 		}
-#op-search .results {
+	}
+
+}
+
+#op-search {
+	.results {
 		display: grid;
 		grid-template-columns: min-content min-content;
 		grid-gap: 6px 16px;
-}
+
-#op-search .results div {
+		div {
 			white-space: nowrap;
 		}
-#op-search .results .ancestors {
+
+
+		.ancestors {
 			display: flex;
-}
+
-#op-search .results .ancestors .ancestor::after {
+			.ancestor::after {
 				content: ">";
 				margin: 0px 8px;
 				color: #a00;
 			}
-#op-search .results .ancestors .ancestor:last-child::after {
+
+			.ancestor:last-child::after {
 				content: "";
 			}
+		}
+	}
+}

static/css/theme.css

@@ -0,0 +1,5 @@
+:root {
+	--color1: #fe5f55;
+	--color2: #efede8;
+	--color3: #666;
+}

static/less/theme.less

@@ -1,3 +1,5 @@
-@color1: #fe5f55;
+:root {
-@color2: #efede8;
+	--color1: #fe5f55;
-@color3: #666;
+	--color2: #efede8;
+	--color3: #666;
+}