pWiki/experiments/outline-editor/editor.css

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

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

	--outline-padding: 5rem;

	--item-indent: 2rem;
	--item-padding-ratio: 0.2;
	--item-padding: calc(1em * var(--item-padding-ratio));

	--checkbox-size: 1.5rem;

	--button-size: 2em;

}


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

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

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

	/*scroll-behavior: smooth;*/
}

.editor {
	display: block;
	position: relative;
}

.editor .code {
	display: none;
}

.editor .outline {
	display: block;
	position: relative;

	/* XXX do a better calculation... */
	width: calc(100% - var(--button-size) - var(--outline-padding) * 2);

	padding-left: var(--outline-padding);
	padding-right: var(--outline-padding);
}

.editor .outline [tabindex] {
	position: relative;
	outline: none;
	border: none;
}
.editor .outline [tabindex] [tabindex] {
	margin-left: var(--item-indent);
}
.editor .outline [tabindex]>span,
.editor .outline [tabindex]>textarea {
	display: block;
	width: 100%;
	/* XXX this is a tiny bit off and using textarea'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: 0;
	box-sizing: border-box;

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

	outline: none;
	border: none;
}
/* show/hide node's view/code... */
.editor .outline [tabindex]>textarea:focus+span,
.editor .outline [tabindex]>textarea:not(:focus) {
	position: absolute;
	opacity: 0;
	top: 0;
}
/* click through the span text to the textarea */
.editor .outline [tabindex]>span {
	position: relative;
	pointer-events: none;
}
/* block hover... */
.editor .outline [tabindex]:hover>span {
	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%);
}
.editor .outline [tabindex]>span:blank {
	content: " ";
}
.editor .outline [tabindex]>textarea {
	height: calc(2 * var(--item-padding) + 1em);
	overflow: hidden;
	resize: none;
}
/* clickable things in view */
.editor .outline [tabindex]>span a,
.editor .outline [tabindex]>span input {
	pointer-events: auto;
}


/* focus... */
editor .outline [tabindex]:focus {
	/*outline: solid 0.2em silver;*/
	outline: none;
}
.editor .outline [tabindex]:focus>span,
.editor .outline [tabindex]:focus>textarea {
	background: rgba(0,0,0,0.1);
}
.editor .outline [tabindex].focused:not(:focus)>span,
.editor .outline [tabindex].focused:not(:focus)>textarea {
	background: rgba(0,0,0,0.05);
}

.editor .outline div[collapsed] {
	border-bottom: solid 1px silver;
}

/* click/tap zones for expand button... */
.editor .outline [tabindex]>span:before,
.editor .outline [tabindex]>span: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;

	background: transparent;
}
/* left indicator */
.editor .outline [tabindex]>span:before {
	justify-content: right;
	left: calc(-1 * var(--size));
}
/* right indicator (collapse/expand) */
.editor .outline [tabindex]>span:after {
	color: silver;
}
.editor .outline [tabindex]:has([tabindex])>span:after {
	content: "○";
}
.editor .outline [tabindex][collapsed]>span:after {
	content: "●";
}

/* collapse -- hide children... */
.editor .outline [tabindex][collapsed] [tabindex] {
	display: none;
}

/* XXX are we selecting subtrees or blocks??? */
.editor .outline [selected] {
	background: silver;
}


.editor .toolbar {
	display: inline-block;
	position: absolute; 
	top: 1em;
	right: 1em;
}
.editor .toolbar 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);
}


/*-------------------------------------------------------------------*/
/* Styles */

/* Headings... */
.editor .outline .heading-1>span,
.editor .outline .heading-1>textarea,
.editor .outline .heading-2>span,
.editor .outline .heading-2>textarea,
.editor .outline .heading-3>span,
.editor .outline .heading-3>textarea,
.editor .outline .heading-4>span,
.editor .outline .heading-4>textarea,
.editor .outline .heading-5>span,
.editor .outline .heading-5>textarea,
.editor .outline .heading-6>span,
.editor .outline .heading-6>textarea {
	margin-top: 1rem;
	font-weight: bold;
}
.editor .outline .heading-1>span,
.editor .outline .heading-1>textarea,
.editor .outline .heading-2>span,
.editor .outline .heading-2>textarea,
.editor .outline .heading-3>span,
.editor .outline .heading-3>textarea {
	border-bottom: solid 1px rgba(0,0,0,0.1);
}

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


/* Lists... */
/* XXX needs to be in the middle of the first span but with universal size... */
.editor .outline .list-item:before,
.editor .outline .list>[tabindex]>span:not(:empty):before {
	content: "◼";
	color: gray;
}
.editor .outline .list>.list>[tabindex]>span:not(:empty):before {
	content: "●";
}
.editor .outline .list>.list>.list>[tabindex]>span:not(:empty):before {
	content: "○";
}
.editor .outline .list>.list>.list>.list>[tabindex]>span:not(:empty):before {
	content: "▪";
}


/* Highlightes... */
.editor .outline .ASAP {
	font-weight: bold;
	background: yellow;
}
.editor .outline .XXX>span {
	background: yellow;
}


/* Comments... */
.editor.hide-comments .outline .comment {
	display: none;
}
.editor .outline .comment>span {
	color: silver;
}


/* Checkboxes... */
:root {
	/* NOTE: this must have a unit... */
	/* XXX move this to the config when fixed... */
	/* XXX setting this to >0em will add margins to both sides of 
	* 	the inline checkbox even if it is the first thing in the 
	* 	element -- can's seem to figure out a way to avoid this */
	--checkbox-margin: 0em;
}
.editor .outline [tabindex].todo>span {
	width: calc(100% - var(--checkbox-size));
	/* align todo checkboxes to indnt (otherwise they are on the indent) */
	margin-left: var(--checkbox-size);
	padding-left: calc(
		var(--item-padding)
		+ var(--checkbox-margin) * 2);
}
.editor .outline [tabindex].check>span>input[type=checkbox],
.editor .outline [tabindex].todo>span>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;
}
.editor .outline [tabindex].todo>span>input[type=checkbox]:first-child {
	margin-left: calc(
		var(--checkbox-size) * -1
		- var(--item-padding)
		- var(--checkbox-margin) * 2);
	margin-right: calc(
		var(--item-padding)
		+ var(--checkbox-margin));
}
/* correct the left click zone... */
.editor .outline [tabindex].todo>span:before {
	margin-left: calc(-1 * var(--checkbox-size));
}
/* XXX need to remove left margin from strictly the first itme in block... */
.editor .outline [tabindex].check>span>input[type=checkbox] {
	/*margin-left: 0;*/
}

/* code... */
.editor .outline [tabindex]>span code {
	padding: 0.1em 0.3em;
	font-family: monospace;
	background: rgba(0,0,0,0.07);
	border-radius: 0.2em;
}


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

.editor.show-click-zones .outline [tabindex]>span:before,
.editor.show-click-zones .outline [tabindex]>span:after {
	background: rgba(0,0,0,0.03);
	border: solid 1px silver;
}
.editor.show-click-zones .outline [tabindex]:hover>span:before,
.editor.show-click-zones .outline [tabindex]:hover>span:after {
	background: rgba(0,0,0,0.1);
}