mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-29 18:10:09 +00:00
333 lines
7.7 KiB
CSS
Executable File
333 lines
7.7 KiB
CSS
Executable File
|
|
/*********************************************************************/
|
|
|
|
:root {
|
|
--font-size: 5mm;
|
|
|
|
--outline-padding: 5rem;
|
|
|
|
--item-indent: 2rem;
|
|
--item-padding: 0.2em;
|
|
|
|
--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;
|
|
}
|
|
.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;
|
|
}
|
|
.editor .outline [tabindex]>span:blank {
|
|
content: " ";
|
|
}
|
|
.editor .outline [tabindex]>textarea {
|
|
height: calc(2 * var(--item-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;
|
|
}
|
|
/* expand/collapse button... */
|
|
.editor .outline [tabindex]:after {
|
|
--size: 0.5rem;
|
|
|
|
content: "";
|
|
position: absolute;
|
|
display: inline-block;
|
|
top: calc(1em / 2);
|
|
right: calc(-1rem + -1 * var(--size) - var(--item-padding));
|
|
width: 0;
|
|
height: 0;
|
|
border: solid calc(var(--size) / 1.2) transparent;
|
|
border-top: solid var(--size) black;
|
|
opacity: 0;
|
|
}
|
|
.editor .outline [tabindex][collapsed]:after {
|
|
border: solid calc(var(--size) / 1.2) transparent;
|
|
border-left: solid var(--size) black;
|
|
margin-right: -0.25rem;
|
|
opacity: 0.1;
|
|
}
|
|
.editor .outline [tabindex]:hover:after {
|
|
opacity: 0.1;
|
|
}
|
|
/* click/tap zone for expand button... */
|
|
.editor .outline [tabindex]:before {
|
|
content: "";
|
|
position: absolute;
|
|
display: inline-block;
|
|
right: -2rem;
|
|
width: 2rem;
|
|
height: calc(1em + var(--item-padding) * 2);
|
|
background: transparent;
|
|
}
|
|
/*
|
|
.editor .outline div[collapsed]:before,
|
|
.editor .outline div[collapsed]:after {
|
|
--size: 0.3em;
|
|
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
bottom: 0;
|
|
right: calc(-1 * var(--size));
|
|
margin-bottom: calc(var(--size) / -2 - 0.5px);
|
|
rotate: -45deg;
|
|
box-sizing: border-box;
|
|
|
|
color: silver;
|
|
border-top: solid 1px silver;
|
|
border-left: solid 1px silver;
|
|
}
|
|
.editor .outline div[collapsed]:before {
|
|
right: auto;
|
|
left: calc(-1 * var(--size));
|
|
rotate: 135deg;
|
|
}
|
|
*/
|
|
.editor .outline div[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 {
|
|
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 {
|
|
--size: 0.5rem;
|
|
|
|
display: inline-block;
|
|
position: absolute;
|
|
content: "";
|
|
top: calc(0.6em + var(--item-padding));
|
|
left: calc(var(--size) * -2);
|
|
width: var(--size);
|
|
height: var(--size);
|
|
margin-top: calc(var(--size) / -2);
|
|
|
|
background: silver;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
/* align todo checkboxes to indnt (otherwise they are on the indent) */
|
|
.editor .outline [tabindex].todo>span {
|
|
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));
|
|
}
|
|
/* XXX need to remove left margin from strictly the first itme in block... */
|
|
.editor .outline [tabindex].check>span>input[type=checkbox] {
|
|
/*margin-left: 0;*/
|
|
}
|
|
|