Notes2/static/less/notes2.less

@import "theme.less";

html {
	background-color: #fff;
}

#notes2 {
	min-height: 100vh;

	display: grid;
	grid-template-areas:
		"tree crumbs"
		"tree name"
		"tree content"
		//"tree checklist"
		//"tree schedule"
		//"tree files"
		"tree blank"
		;
	grid-template-columns: min-content 1fr;

	@media only screen and (max-width: 600px) {
		grid-template-areas:
			"crumbs"
			"name"
			"content"
			//"checklist"
			//"schedule"
			//"files"
			"blank"
			;
		grid-template-columns: 1fr;

		#tree {
			display: none;
		}
	}
}

#tree {
	grid-area: tree;
	padding: 16px;
	background-color: #333;
	color: #ddd;
	z-index: 100; // Over crumbs shadow

	#logo {
		display: grid;
		position: relative;
		justify-items: center;
		margin-bottom: 32px;
		margin-left: 24px;
		margin-right: 24px;
		img {
			width: 128px;
			left: -20px;

		}
	}

	.node {
		display: grid;
		grid-template-columns: 24px min-content;
		grid-template-rows:
			min-content
			1fr;
		margin-top: 12px;


		.expand-toggle {
			user-select: none;
			img {
				width: 16px;
				height: 16px;
			}
		}

		.name {
			white-space: nowrap;
			cursor: pointer;
			user-select: none;

			&:hover {
				color: @color1;
			}
			&.selected {
				color: @color1;
				font-weight: bold;
			}

		}

		.children {
			padding-left: 24px;
			margin-left: 8px;
			border-left: 1px solid #444;
			grid-column: 1 / -1;

			&.collapsed {
				display: none;
			}
		}
	}
}

#crumbs {
	grid-area: crumbs;
	display: grid;
	justify-items: center;
	margin: 16px;
}

.crumbs {
	background: #e4e4e4;
	display: flex;
	flex-wrap: wrap;
	padding: 8px 16px;
	background: #e4e4e4;
	color: #333;
	border-radius: 5px;

	&.node-modified {
		background-color: @color1;
		color: @color2;
		.crumb:after {
			color: @color2;
		}
	}

	.crumb {
		margin-right: 8px;
		cursor: pointer;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	.crumb:after {
		content: "•";
		margin-left: 8px;
		color: @color1
	}

	.crumb:last-child {
		margin-right: 0;
	}
	.crumb:last-child:after {
		content: '';
		margin-left: 0px;
	}

}

#name {
	color: @color3;
	font-weight: bold;
	text-align: center;
	font-size: 1.15em;
	margin-top: 32px;
	margin-bottom: 16px;
}

/* ============================================================= *
 * Textarea replicates the height of an element expanding height *
 * ============================================================= */
.grow-wrap {
	/* 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: 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;
	white-space: pre-wrap;
	word-wrap: break-word;
	color: #f0f;
	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;
}
.grow-wrap > textarea,
.grow-wrap::after {
	/* 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;
	font-family: monospace;
	color: #333;
	width: calc(100% - 32px);
	max-width: 900px;
	resize: none;
	border: none;
	outline: none;

	&:invalid {
		background: #f5f5f5;
		padding-top: 16px;
	}
}

#blank {
	grid-area: blank;
	height: 32px;
}