pWiki/experiments/outline-editor/editor.css

/**********************************************************************
* 
*
*
**********************************************************************/

:root {
	--font-size: 5mm;

	--outline-padding: 7rem;

	--item-indent: 2rem;
	--item-padding-ratio: 0.2;

	--checkbox-size: 1.5rem;
	--checkbox-margin: 0.5em;

	--button-size: 2em;

}


/*********************************************************************/

:root {
	font-family: sans-serif;
	font-size: var(--font-size);

	/*text-size-adjust: none;*/
	text-size-adjust: 180%;

	background: white;
	color: black;
}

:host,
.editor {
	--item-padding: calc(1em * var(--item-padding-ratio));
}



/*********************************************************************/

:host,
.editor {
	display: block;
	position: relative;


	/* loading indicator */
	&.loading {
		.outline {
			pointer-events: none;
		}
		.outline>.block {
			opacity: 0.2;
		}
		/* XXX STUB... */
		.outline:before {
			content: "Loading...";
			display: block;
			position: absolute;
			top: 1em;
		}
		.outline:empty:before {
			position: relative;
			top: 0;
		}
		/* override empty indicator */
		.outline:after {
			content: "" !important;
		}
	}


	/* editor code */
	&>.code {
		display: none;
	}

	/* header */
	.header {
		margin: 1em var(--outline-padding);
		padding-bottom: 1.2em;

		border-bottom: solid 1px rgba(0,0,0,0.15);

		&:empty {
			display: none;
		}
		.path-item {
			color: gray;
			cursor: pointer;
			/* XXX needs more work... */
			max-width: 10rem;
			text-overflow: ellipsis;

			&:hover {
				text-decoration: underline;
			}
			&:first-child {
				padding-left: 3em;
				margin-left: -2em;
			}
		}
	}

	.outline {
		display: block;
		position: relative;

		padding: 1em var(--outline-padding);
		padding-bottom: 1.2em;

		/* virtual empty block... */
		&:empty:after {
			content: "Empty";
			display: block;
			font-style: italic;
			color: rgba(0,0,0,0.2);
		}
		&:empty:hover:after {
		}


		.block .block {
			margin-left: var(--item-indent);
		}
		.block {
			position: relative;
			outline: none;
			border: none;

			/* focus... */
			&:focus {
				/*outline: solid 0.2em silver;*/
				outline: none;
			}
			&:focus>.text {
				background: rgba(0,0,0,0.07);
			}
			&.focused:not(:focus)>.text {
				background: rgba(0,0,0,0.01);
			}

			/* collapsed block... */
			&[collapsed] {
				border-bottom: solid 1px silver;
				&>.children {
					display: none;
				}
			}

			/* select... */
			/* XXX are we selecting subtrees or blocks??? */
			&[selected]>.text {
				background: silver;
			}

			&>.text {
				--v-margin: 0;

				display: block;
				width: 100%;
				/* XXX this is a tiny bit off and using .code's height here is off too... */
				min-height: calc(1em + var(--item-padding) * 2);
				padding-top: var(--item-padding);
				padding-bottom: var(--item-padding);
				padding-left: 0;
				padding-right: 0;
				margin: var(--v-margin) 0;
				box-sizing: border-box;

				font-family: sans-serif;
				font-size: var(--font-size);
				white-space: pre-wrap;

				outline: none;
				border: none;
			}

			&>.code {
				position: absolute;
				top: 0;
				/* XXX this is not correct -- it expands the code to cover 
						the whole element incl. children... */
				height: 100%;
				/*height: calc(2 * var(--item-padding) + 1em);*/
				overflow: hidden;
				resize: none;
				opacity: 0;

				/* show/hide node's view/code... */
				&:focus {
					position: relative;
					opacity: 1;
				}
				/* hide .view content but show before/after -- keep bulets and touch zones... */
				&:focus+.view {
					position: absolute;
					top: 0;
					visibility: hidden;

					&:before,
					&:after {
						visibility: visible;
						margin-top: calc(-1 * var(--v-margin));
						margin-bottom: calc(-1 * var(--v-margin));
					}
				}
			}

			/* click through the .view text to the .code */
			/* NOTE: .view visibility is handled in .code above... */
			&>.view {
				position: relative;
				pointer-events: none;
				user-select: none;

				/* clickable things in view */
				& a,
				& pre,
                & button,
                & select,
				& input {
					pointer-events: auto;
				}

				/* click/tap zones for expand button... */
				&:before,
				&:after {
					--size: 3rem;

					content: "";
					position: absolute;
					display: flex;
					top: 0;
					right: calc(-1 * var(--size));
					width: var(--size);
					height: 100%;

					align-items: top;
					justify-content: center;

					box-sizing: border-box;
					border-left: solid 0.5em transparent;
					border-right: solid 0.5em transparent;

					/* make the text align to the center of the first line... */
					font-size: 1rem;
					/* XXX the 1.1 coeficient here is a hack... */
					line-height: calc(
						var(--font-size)
							* 1.1
						+ var(--font-size) 
							* var(--item-padding-ratio) 
							* 2);

					pointer-events: auto;

					cursor: pointer;
					background: transparent;
				}
				/* left indicator */
				&:before {
					justify-content: right;
					left: calc(-1 * var(--size));
				}
			}


			/* indicators... */
			/* left indicator bullet */
			/* XXX not sure about this yet... */
			&>.view:before {
				content: "●";
				color: rgba(0,0,0,0.07);
			}
			&>.view:empty:before {
				content: "";
			}
			/* right indicator (collapse/expand) */
			&>.view:after {
				color: silver;
			}
			&:has(.block)>.view:after {
				content: "○";
			}
			&[collapsed]>.view:after {
				content: "●";
			}

			&>.children {
				position: relative;
			}
		}

		/* block hover... */
		&:empty:hover:after,
		.block:not(.focused):hover>.view {
			background: linear-gradient(
				90deg, 
					rgba(0,0,0,0.01) 0%, 
					rgba(0,0,0,0.01) 80%, 
					rgba(0,0,0,0.03) 100%);
		}
	}

	/* 
	* NOTE: the organization after this point does not feel right/clean, 
	* 		not sure how to do this better... 
	*/

	/* crop... */ 
	&.crop .outline .block {
		&[cropped] .block,
		&[cropped] .block[cropped] {
			margin-left: var(--item-indent);
		}

		&:not([cropped]) {
			padding: 0;
			border: none;
			background: none;

			.text {
				display: none;
			}
		}
		&,
		&[cropped] {
			margin-left: 0;
		}
		/* XXX nesting this in &[cropped] for some reaon breaks things... */
		&[cropped] .text {
			display: block;
		}
	}

	/* toolbar... */
	.toolbar {
		display: inline-block;
		position: absolute; 
		top: 1em;
		right: 1em;

		button {
			--margin: 0.1em;

			display: block;

			width: calc(var(--button-size) + var(--margin) * 2);
			height: var(--button-size);
			margin: var(--margin);

			font-size: var(--button-size);
		}
	}

	&.block-offsets .outline .block {
		border-left: solid 1px silver;
	}
}








/********************************************************** Styles ***/


/*------------------------------------------------------ Headings ---*/

:host .outline,
.editor .outline {
	.heading {
		margin-top: 1rem;

		&>.text {
			font-weight: bold;
			border-bottom: solid 1px rgba(0,0,0,0.1);
		}
	}
	.heading .heading .heading .heading>.text,
	.heading-4>.text,
	.heading-5>.text,
	.heading-6>.text {
		border-bottom: none;
	}

	.heading>.text,
	.heading-1>.text {
		--font-size: 2.5em;
	}
	.heading .heading>.text,
	.heading-2>.text {
		--font-size: 1.9em;
	}
	.heading .heading .heading>.text,
	.heading-3>.text {
		--font-size: 1.5em;
	}
	.heading .heading .heading .heading>.text,
	.heading-4>.text {
		--font-size: 1.3em;
	}
	.heading .heading .heading .heading .heading>.text,
	.heading-5>.text {
		--font-size: 1.1em;
	}
	.heading .heading .heading .heading .heading .heading>.text,
	.heading-6>.text {
		--font-size: 1em;
	}
}


/*----------------------------------------------------------- TOC ---*/

:host .outline,
.editor .outline {
	.toc>.view,
	.TOC>.view {
		padding-top: 0px;
		padding-bottom: 0px;
	}
}


/*--------------------------------------------------------- Quote ---*/

:host .outline .quote>.text,
.editor .outline .quote>.text {
	--indent: 1rem;
	--v-margin: 0.7rem;
	--item-padding-ratio: 0.7;

	/* XXX for some reason if this is not set here it will not see the new --item-padding-ratio */
	--item-padding: calc(1rem * var(--item-padding-ratio));

	padding: var(--item-padding) 1.5rem;
	color: rgba(0,0,0,0.8);

	/* XXX border messes up bullet alignment... */
	/*border-left: solid 0.2em silver;*/
	box-shadow: inset 0.2em 0 0 0 silver;
	background: rgba(0,0,0,0.05);
}


/*---------------------------------------------------------- List ---*/

:host .outline,
.editor .outline {
	.list-item>.view:before,
	.list>.children {
		&>.block>.view:before {
			content: "◼";
			color: gray;
		}
		&>.list>.children {
			&>.block>.view:before {
				content: "●";
			}
			&>.list>.children {
				&>.block>.view:before {
					content: "○";
				}
				&>.list>.children {
					&>.block>.view:before {
						content: "▪";
					}
				}
			}
		}
		/* hide bullets on empty nodes unless they are edited... */
		&>.block>.code:not(:focus)+.view:empty:before {
			content: "" !important;
		}
		/* hide bullets on empty nodes... *//*
		&>.block>.view:empty:before {
			content: "";
		}
		*/
	}
}


/*------------------------------------------------ Numbered lists ---*/

:host .outline .numbered-list>.children,
.editor .outline .numbered-list>.children {
	counter-reset: numbered-list;

	&>.block>.view:not(:empty):before {
		counter-increment: numbered-list; 
		content: counter(numbered-list) ".";
		color: gray;
	}
	&>.numbered-list>.children {
		&>.block>.view:not(:empty):before {
			counter-increment: numbered-list; 
			content: counter(numbered-list, lower-alpha) ".";
		}
		&>.numbered-list>.children {
			&>.block>.view:not(:empty):before {
				counter-increment: numbered-list; 
				content: counter(numbered-list, lower-roman) ".";
			}
			&>.numbered-list>.children {
				&>.block>.view:not(:empty):before {
					counter-increment: numbered-list; 
					content: counters(numbered-list, ".") ".";
				}
			}
		}
	}
}


/*------------------------------------------------------ hr block ---*/

:host .outline,
.editor .outline {
	.list>.children>.block.hr>.view:before {
		content: "";
	}
	.numbered-list>.children>.block.hr>.view:before {
		content: "";
	}
}


/*--------------------------------------------------------- Notes ---*/

:host .outline .NOTE,
.editor .outline .NOTE {
	--margin: 1rem;
	--padding-h: 2rem;
	--padding-v: 1.2em;

	margin: var(--margin) 0;
	padding: var(--padding-v) var(--padding-h);
	border: solid 2px silver;
	background: rgba(0,0,0,0.05);

	/* XXX this prevents it from being accesible via click/tap... */
	&>.view:empty {
		display: none;
	}
	&:focus>.view:empty {
		display: block;
	}
	&>.view:empty ~ .children {
		margin-left: -1rem;
	}
	&>.view:before {
		content: "" !important;
	}
	/* correct the right click zone... */
	/* XXX need to account for nesting... (???) */
	&.block>.view:after,
	&.block .block>.view:after {
		margin-right: calc(-1 * var(--padding-h));
	}
}


/*-------------------------------------------------------- Status ---*/

:host .outline .block,
.editor .outline .block {
	&.DONE>.view {
		text-decoration: line-through;
		opacity: 0.5;
	}
	&.REJECT>.view {
		text-decoration: line-through;
	}
}


/*--------------------------------------------------- Highlightes ---*/

:host .outline,
.editor .outline {
	--highlight-color: yellow;
	--highlight-focus-color: rgb(253, 218, 13);
	--highlight-hover-color: rgba(253, 218, 13, 0.5);
	--highlight-focus-hover-color: rgba(253, 218, 13, 0.7);
	
	.highlight {
		font-weight: bold;
		background: yellow;
	}
	.XXX {
		&>.view {
			background: var(--highlight-color);
		}
		&:hover>.view {
			background: var(--highlight-hover-color) !important;
		}
		&.focused {
			&>.view,
			&>.text {
				/* XXX can we avoid !important here??? */
				background: var(--highlight-focus-color) !important;
			}
			&:hover>.view {
				background: var(--highlight-focus-hover-color) !important;
			}
		}
	}
}


/*------------------------------------------------------ Comments ---*/

:host.hide-comments .outline .comment,
.editor.hide-comments .outline .comment {
	display: none;
}
:host .outline .comment>.view,
.editor .outline .comment>.view {
	color: silver;
}


/*---------------------------------------------------- Checkboxes ---*/

:host .outline .block,
.editor .outline .block {
	&.todo>.view {
		width: calc(
			100% 
			- var(--checkbox-size)
			- var(--checkbox-margin));
		margin-left: calc(
			var(--checkbox-size)
			+ var(--checkbox-margin));
	}
	&.check>.view input[type=checkbox],
	&.todo>.view input[type=checkbox] {
		height: var(--checkbox-size);
		width: var(--checkbox-size);

		margin-top: calc(var(--checkbox-size) / -2);
		margin-left: var(--checkbox-margin);
		margin-right: var(--checkbox-margin);

		transform: translateY(calc(2 * var(--item-padding)));

		/* NOTE: this appears to be needed for the em sizes above to work correctly */
		font-size: 1em;
	}
	&.check.focused>.view input[type=checkbox].selected,
	&.todo.focused>.view input[type=checkbox].selected {
		outline: solid 0.2em silver;
	}
	&.check:focus>.view input[type=checkbox].selected,
	&.todo:focus>.view input[type=checkbox].selected {
		outline: solid 0.2em gray;
	}
	&.todo>.view input[type=checkbox]:first-child {
		margin-left: calc(
			-1 * var(--checkbox-size)
			- var(--checkbox-margin));
	}
	/* correct the left click zone... */
	&.todo>.view:before {
		margin-left: calc(
			-1 * var(--checkbox-size)
			- var(--checkbox-margin));
	}
	/* status... */
	&>.view .completion[completion]:before {
		content: "(" attr(completion) ")";
		color: gray;
	}
}


/*---------------------------------------------------------- Code ---*/

:host .outline .block>.view,
.editor .outline .block>.view {
	/* XXX for some reason if we omit & where not needed, colors will not apply... */
	& pre,
	&>code,
	& :not(pre)>code {
		font-family: monospace;
		background: rgba(0,0,0,0.07);
		border-radius: 0.2em;
		outline: none;
	}
	& :not(pre)>code {
		padding: 0.1em 0.3em;
	}
	& pre>code {
		--padding: 0.6em;

		display: block;
		min-width: calc(100% - var(--padding) * 2);
		width: fit-content;
		padding: var(--padding) var(--padding);
		padding-bottom: calc(var(--padding) + 0.2em);
		outline: none;
	}

	/* scrollbar... */
	& pre {
		margin: 0.8em 0em;

		overflow-x: visible;
		overflow-y: auto;

		scrollbar-width: thin;
	}
	& pre::-webkit-scrollbar {
		--size: 0.5rem;

		width: var(--size);
		height: var(--size);

		/* XXX due to a bug in chrome this does change the scrollbar curosr... */
		cursor: pointer;
	}
	& pre::-webkit-scrollbar-track {
		background: transparent;
	}
	& pre::-webkit-scrollbar-thumb {
		background: silver;
	}
}


/*-------------------------------------------------------- Tables ---*/

:host .outline .block>.view>table,
.editor .outline .block>.view>table {
	width: 100%;
	border-collapse: collapse;

	/* XXX for some reason if we omit & where not needed, colors will not apply... */
	& tr:nth-child(odd) {
		background: rgba(0,0,0,0.03);
	}
	& tr:first-child {
		font-weight: bold;
		border-bottom: solid 0.1rem silver;
		background: transparent;
	}
	& td {
		height: calc(1em + var(--item-padding) * 2);
		padding: 0 1em;
		/*text-align: center;*/
	}
}


/* XXX EXPERIMENTAL... 
*	- need to handle nested blocks somehow...
*/
.editor .outline .block.table-2 {

	&>.view {
		font-size: small;
		color: rgba(0,0,0,0.4);
	}

	&.focused {
		background: rgba(0,0,0,0.05);
	}
	&:focus {
		background: rgba(0,0,0,0.07);
	}
	&>.code:focus {
		position: absolute;
	}

	&>.children {
		display: table !important;
		width: 100%;

		&>.block {
			display: table-row;

			&:first-child>.view td {
				font-weight: bold;
				border-bottom: solid 0.1rem silver;
			}

			&:nth-child(even) {
				background: rgba(0,0,0,0.03);
			}
			&:not(:first-child) {
				&>.view td {
					font-weight: normal !important;
				}
			}

			&.focused {
				background: rgba(0,0,0,0.03);
			}
			&:focus {
				background: rgba(0,0,0,0.07);
			}
			&>.code:focus {
				column-span: all;
			}
		}
	}

	.block>.children,
	.view,
	table,
	tbody,
	tr {
		display: contents !important;
	}
}



/********************************************************* Testing ***/

:host.show-click-zones .outline .block,
.editor.show-click-zones .outline .block {
	&>.view {
		&:before,
		&:before,
		&:after {
			background: rgba(0,0,0,0.03);
			border: solid 1px silver;
		}
	}
	&:hover>.view {
		&:before,
		&:after {
			background: rgba(0,0,0,0.1);
		}
	}
}




/**********************************************************************
* vim:set ts=4 sw=4 : */