pWiki/experiments/outline-editor/editor.css

:root {
	--font-size: 5mm;
	--button-size: 2em;

	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) + 4em));
}

.editor .outline [tabindex] {
	position: relative;
}
.editor .outline div [tabindex] {
	margin-left: 2em;
}
.editor .outline [tabindex]>span,
.editor .outline [tabindex]>textarea {
	--padding: 0.2em;

	display: block;
	width: 100%;
	/* XXX this is a tiny bit off and using textarea's height here is off too... */
	min-height: 1em;
	padding: var(--padding);
	margin: 0;

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

	outline: none;
	border: none;
}
.editor .outline [tabindex]>textarea {
	height: calc(2 * var(--padding) + 1em);
	overflow: hidden;
	resize: 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;
}

/* 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;
}
.editor .outline div[collapsed] div {
	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 */

.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 {
	font-weight: bold;
}
.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;
}

/* XXX EXPERIMENTAL -- not sure about this... */
.editor .outline .list-item:before,
.editor .outline .list>[tabindex]:before {
	display: inline-block;
	position: absolute;
	content: "";
	top: 0.6em;
	left: -0.8em;
	width: 0.5em;
	height: 0.5em;
	background: silver;
}

.editor .outline .XXX>span {
	background: yellow;
}

.editor .outline .comment>span {
	color: silver;
}

.editor .outline [tabindex]>span>input[type=checkbox] {
	--width: 3em;

	height: 1em;
	width: var(--width);
	margin-left: calc(-1 * var(--width));
}